变形 transform-2d 变形
在 CSS3 中，我们可以使用 transform 属性来实现文字或图像的的各种变形效果， 如位移、缩放、旋转、倾斜
transform属性变形方法
旋转 rotate()方法
在 CSS3 中，我们可以使用 rotate()方法来将元素相对中心原点进行旋转。
语法:transform:rotate(度数);说明:度数指的是元素相对中心原点进行旋转的度数，单位为 deg。其中，deg
是 degree(度数)的缩写。
它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原
点中心顺时针旋转;如果这个值为负值，元素相对原点中心逆时针旋转。如下图所示:
位移 translate()方法
在 CSS3 中，我们可以使用 translate()方法将元素沿着水平方向(X 轴)和垂直方 向(Y 轴)移动.
对于位移 translate()方法，我们分为 3 种情况:
(1)translateX(x):元素仅在水平方向移动(X 轴移动);
语法:transform:translateX(x);
在 CSS3 中，所有变形方法都是属于 transform 属性，因此所有关于变形的方法前
面都要加上“tranform:”，以表示“变形”处理。x 表示元素在水平方向(X 轴)的移动 距离，单位为 px、em 或百分比等。
(2)translateY(y):元素仅在垂直方向移动(Y 轴移动);
语法:tranform:translateY(y)
说明:y 表示元素在水平方向(y 轴)的移动距离，单位为 px、em 或百分比等。
当 y 为正时，表示元素在垂直方向向下移动;当 y 为负时，表示元素在垂直方向向上移动。
在 W3C 规定中，出于人的习惯是从上到下阅读，所选取的坐标系为下图中的第2种坐标系，因此x
轴正方向向右，而y轴正方向向下。而你所想到的坐标系应该是下图中的第1种坐标系，这种坐标系是“数学形式”的坐标系，
只适合在数学应用上。一定要搞清楚这一点!
( 3 )translate( x , y ) :元 素 在 水 平 方 向 和 垂 直 方 向 同 时 移 动( X 轴 和 Y 轴 同 时 移 动 );
语法:tranform:translate(x,y)
说明:x 表示元素在水平方向(x 轴)的移动距离，y 表示元素在水平方向(y 轴)的
移动距离。注意，Y 是一个可选参数，如果没有设置 Y 值，则表示元素仅仅沿着 X 轴正方形 移动。
缩放 scale()方法
缩放，指的是“缩小”和“放大”。在 CSS3 中，我们可以使用 scale()方法来将元 素根据中心原点进行缩放。
缩放 scale()方法也有 3 种情况:
(1)scaleX(x):元素仅水平方向缩放(X 轴缩放);
语法:transform:scaleX(x)
说明:x 表示元素沿着水平方向(X 轴)缩放的倍数，如果大于 1 就代表放大;如
果小于 1 就代表缩小。
(2)scaleY(y):元素仅垂直方向缩放(Y 轴缩放);
语法:transform:scaleY(y)
说明:y 表示元素沿着垂直方向(Y 轴)缩放的倍数，如果大于 1 就代表放大;如
果小于 1 就代表缩小。
(3)scale(x,y):元素水平方向和垂直方向同时缩放(X 轴和 Y 轴同时缩放);
语法:transform:scale(x,y)
说明:x 表示元素沿着水平方向(X 轴)缩放的倍数，y 表示元素沿着垂直方向(Y轴)缩放的倍数。
注意，Y 是一个可选参数，如果没有设置 Y 值，则表示X,Y方向上的缩放倍数是一样的(同时放大相同倍数)。
倾斜 skew()方法
它可以将一个对象以其中心位置围绕着X 轴和Y 轴按照一定的角度倾斜。这与 rotate()函 数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而 只会改变元素的形状。
在 CSS3 中，我们可以使用 skew()方法将元素倾斜显示。
skew()方法跟 translate()方法、scale()方法一样，也有 3 种情况:
(1)skewX(x):使元素在水平方向倾斜(X 轴倾斜);transform:skewX(x);
(2)skewY(y):使元素在垂直方向倾斜(Y 轴倾斜);transform:skewY(y);
(3)skew(x,y):使元素在水平方向和垂直方向同时倾斜(X 轴和 Y 轴同时倾斜);
transform:skew(x,y);
说明:第一个参数对应 X 轴，第二个参数对应 Y 轴。如果第二个参数未提供，则
值为 0，也就是 Y 轴方向上无斜切。
理解:skew的默认原点transform-origin是这个物件的中心点
skewX(30deg) 如下图:(沿着X轴倾斜，沿着Y轴呈逆时针旋转30度。)
skewY(10deg)如下图:(沿着y轴倾斜，沿着X轴呈顺时针旋转10度。)
skew(30deg, 10deg)如下图:
transform-origin 属性
任何一个元素都有一个中心原点，默认情况下，元素的中心原点位于X轴和Y轴的50%处,
如下图所示:
默认情况下，CSS3变形进行的位移、缩放、旋转、倾斜都是以元素的中心原点(50%,50%)进行变形。但很多时候，我们可以通过 transform-origin 属性来改变元素变形时的中心原点位置。
语法:
transform-origin:[<percentage>|<length>|left|center1|right][<percentage> | <length> | top | center2 | bottom ]?
默认值:50% 50%，效果等同于 center center
不管 transform-origin 取值为长度值还是关键字，都需要设置水平方向和垂直方向的值。
