transform旋转，平移，缩放，扭曲 斜切

transform  改变
rotate 旋转
translate  位移
scale 缩放

skew  斜切变形

记得兼容性：
-webkit-
   -moz-
    -ms-
     -o-

transform: rotate(Xdeg,Ydeg);
deg 表示角度 X轴正半轴为0deg，顺时针旋转值越来越大。
transform-origin( X ,Y ); 设置对象旋转的中心点，如果没设置该值，默认transform-origin(50%,50%);

transform-origin(100px,200px); 设定旋转的中心点为，水平位移100px，垂直位移200px;
transform: rotate(45deg); 对象 以水平位移100px,垂直位移200px 为中心点旋转45度。

默认旋转中心为对象的正中心，即：图片长宽的50%。transform-origin:50% 50%;
rotate指定对象的2D旋转，指定对象指的是当前对象，也就是原元素，虽然子元素也会跟着动，
但是子元素并没有发生相对旋转，旋转一定要有一个旋转中心，所以需先有transform-origin属性的定义来确定旋转中心，
如果缺省，默认为transform-origin: 50% 50%。

transform:translate(X , Y);    px,vh,vw,%,rem,em,cm,mm等相对单位，绝对单位都有效。
X   相对图片左上角顶点，进行水平位移。
Y   相对图片左上角顶点，进行垂直位移。
transform: translate(200px);  ===  transform: translate(200px,0);
transform: translate(0,200px); 如果只让Y轴垂直位移，那么X轴参数不能省略。
只写一个参数那么默认X轴水平位移200px，Y轴不进行位移。

transform:translateX(x);
transform:translateY(x);
transform: scale( X , Y );
以对象的正中心为缩放中心，把对象进行缩放，这里是等比例缩放，对象不会变形，缩放对象包括图片，div等等。
transform: scaleX( .5 );     以对象的正中心为中心，水平缩放到宽度等于原来宽度的50%；
transform: scaleY( .5 );  以对象的正中心为中心，垂直缩放到高度等于原来高度的50%；
transform: scale( .5 , .5 ); 以对象的正中心为中心，水平垂直缩放到原来宽高的50%；
transform: scale( .5 );  ===  transform: scale( .5 , .5 );

=================

transform: rotate(Xdeg,Ydeg);
deg 表示角度 X轴正半轴为0deg，顺时针旋转值越来越大。
transform-origin( X ,Y ); 设置对象旋转的中心点，如果没设置该值，默认transform-origin(50%,50%);

transform-origin(100px,200px); 设定旋转的中心点为，水平位移100px，垂直位移200px;
transform: rotate(45deg); 对象 以水平位移100px,垂直位移200px 为中心点旋转45度。

默认旋转中心为对象的正中心，即：图片长宽的50%。transform-origin:50% 50%;
rotate指定对象的2D旋转，指定对象指的是当前对象，也就是原元素，虽然子元素也会跟着动，
但是子元素并没有发生相对旋转，旋转一定要有一个旋转中心，所以需先有transform-origin属性的定义来确定旋转中心，
如果缺省，默认为transform-origin: 50% 50%。

transform:translate(X , Y);    px,vh,vw,%,rem,em,cm,mm等相对单位，绝对单位都有效。
X   相对图片左上角顶点，进行水平位移。
Y   相对图片左上角顶点，进行垂直位移。
transform: translate(200px);  ===  transform: translate(200px,0);
transform: translate(0,200px); 如果只让Y轴垂直位移，那么X轴参数不能省略。
只写一个参数那么默认X轴水平位移200px，Y轴不进行位移。

兼容性问题：

-webkit-
   -moz-
    -ms-
     -o-

----------------------------

transform:translateX(x);
transform:translateY(x);
transform: scale( X , Y );
以对象的正中心为缩放中心，把对象进行缩放，这里是等比例缩放，对象不会变形，缩放对象包括图片，div等等。
transform: scaleX( .5 );     以对象的正中心为中心，水平缩放到宽度等于原来宽度的50%；
transform: scaleY( .5 );  以对象的正中心为中心，垂直缩放到高度等于原来高度的50%；
transform: scale( .5 , .5 ); 以对象的正中心为中心，水平垂直缩放到原来宽高的50%；
transform: scale( .5 );  ===  transform: scale( .5 , .5 );

实例1：
将一个width:1000px;height:500px;的元素缩放为width:300px;height:100px;，
scale缩放的参数是以1为基准的[sx,sy]缩放矢量参数，即宽度缩放为原元素的sx倍，高度缩放为原元素的sy倍。所以缩放的应该是transform: scale(300/1000, 100/500),但是scale()中不能用分数，所以正确答案是transform: scale(.3, .2)。

实例2：
原元素的宽高属性为width:1000px;height:500px;，执行transform: scale(.5);之后的变化表述正确的是？

scale缩放的参数是以1为基准的[sx,sy]缩放矢量参数，即宽度缩放为原元素的sx倍，高度缩放为原元素的sy倍。当第二个参数省略的时候，默认宽度和高度的缩放比例都和第一个参数一样，实现等比缩放。width:1000px和height:500px;执行transform: scale(.5);之后，width=1000px*.5=500px;height=500px*.5=250px
注意：
这里的缩放是针对元素对象本身，而不是其父元素。

===============================

transform: skewX( Xdeg );

已经定义对象div宽高如：width:300px;  height:200px;

如上图：transform: skewX( 30deg ); 可以理解为：

最重要的是：没变形之前，在对象的几何中心画X,Y轴，skew是相对它们进行角度旋转的。

对象以X正半轴为0deg，逆时针旋转30deg，两条宽度永远都与X轴平行，除了角度达到最大90deg/-90deg时，变成一条看不见的线。

高度永远为300px 。旋转最大角度（变成一条看不见的线）为 90deg 或 -90deg 。正度数就在X正半轴，负度数就在X负半轴。

同理：

transform: skewY(20deg); 理解：

最重要的是：没变形之前，在对象的几何中心画X,Y轴，skew是相对它们进行角度旋转的。

对象以Y正半轴为0deg，顺时针旋转20deg（跟X轴相反）。且高度永远跟Y轴平行，除了角度达到最大90deg/-90deg时，变成一条看不见的线。

宽度永远为200px。旋转最大角度（变成一条看不见的线）为 90deg 或 -90deg 。正度数就在Y正半轴，负度数就在Y负半轴。

transform: skew( 20deg );  ===  transform: skew(20deg , 0deg);

transform: skew( 0 , 20deg );  表示对象的Y轴旋转20度。

skew   X轴，Y轴的取值范围都是： 90deg ~ -90deg ;

X轴 以X正半轴为0deg，值逆时针越来越大。
Y轴 以Y正半轴为0deg，值顺时针越来越大。
Xdeg +  Ydeg = 90deg或-90deg  那么就变成看不到的一条直线。
使用元素审查，改变度数最好。

transform: skew(<angle> [, <angle>]);其中angle为倾斜角度，角度方向跟随极坐标角度方向，逆时针为正方向，顺时针为负方向。当只有一个参数的时候，第二个参数默认为0deg，因此transform: skew(45deg);为元素的水平方向逆时针倾斜45度，竖直方向倾斜0度

==========================

在transform: rotate3d(x, y, z, angle);中，第一个参数表示X轴，第二个参数表示Y轴，第三个参数表示Z轴，其中0为该方向不旋转，大于0为正方向旋转（顺时针），小于0为负方向旋转（逆时针），第四个参数表示旋转的角度，参数不允许省略。

需要把一个宽度为1000像素和高度为250像素的元素缩放为宽度为500像素、高度为500像素

scale3d(sx,sy,sz)，sx为横向缩放比例；sy为纵向缩放比例；sz为z轴缩放比例，参数不允许省略，无缩放比例为1，宽度1000px缩放为500px，宽度变成原来的一半，即1000*0.5=500px，高度250px变成500px，增加了一半，因此250*2=500px；z轴没有缩放，参数不能省略，使用1表示无缩放。因此transform: scale3d(.5, 2, 1)正确。