CSS3变形技术有哪些
导读：本文共1743.5字符，通常情况下阅读需要6分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： CSS3变形指的是利用transform属性对元素进行旋转、扭曲、缩放、位移、矩阵、原点等类型的变形处理；元素的变形操作需要配合使用rotate()、skew()、scale()、translate()、matrix()等函数来实现。本教程操作环境：... ...
目录
(为您整理了一些要点),点击可以直达。
CSS3变形指的是利用transform属性对元素进行旋转、扭曲、缩放、位移、矩阵、原点等类型的变形处理；元素的变形操作需要配合使用rotate()、skew()、scale()、translate()、matrix()等函数来实现。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
什么是css3变形
在CSS3中，可以利用transform功能来实现文字或图像的旋转、扭曲、缩放、位移、矩阵、原点这六种类型的变形处理，下面将详细讲解transform的使用。
变形--旋转 rotate()
变形--扭曲 skew()
Skew()具有三种情况：
1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；
2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；
3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
变形--缩放 scale()
缩放 scale 具有三种情况：
1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
2、scaleX(x)元素仅水平方向缩放（X轴缩放）
3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。
变形--位移 translate()
translate我们分为三种情况：
1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
2、translateX(x)仅水平方向移动（X轴移动）
3、translateY(Y)仅垂直方向移动（Y轴移动）
变形--矩阵 matrix ()
变形--原点 transform-origin
改变元素原点到左上角，然后进行顺时旋转45度。
CSS3变形技术有哪些的详细内容，希望对您有所帮助，信息来源于网络。