变形（transform）属性-2D
让元素在一个坐标系统中变形。这个属性可以移动、旋转和缩放元素。
transform:none | <transform-function>[<transform-function>]*;
默认是：
transform:none;
rotate()旋转
指定角度参数对原元素指定2D旋转
transform:rotate(<angle>);
例：transform: rotate(-45deg);逆时针旋转45度
angle为正数代表顺时针旋转，负数是逆时针。
translate()平移
从当前位置向x轴或y轴移动。
translateX（x）
水平移动，从左到右为正
translateY（y）
垂直移动，从上到下为正
translate（x，y）
水平垂直移动
scale()缩放
scaleX(x)
水平缩放，中心点，取值为百分比
scaleY(y)
竖直缩放
scale(x,y)
缩放，如果就填一个数，那么是等比例放大缩小
skew()扭曲或斜切
skewX
(正值：逆时针)x轴斜切
skewY
(正值：顺时针)y轴斜切
skew(x,y)
如果y没填只有x，就默认y为0
3D变换
rotate3D（）
transform:rotateX(<angle>);//X轴旋转的角度
transform:rotateY(<angle>);//Y轴旋转的角度
transform:rotateZ(<angle>);//Z轴旋转的角度
transform:rotate(x,y,z,<angle>);//Z轴旋转的角度
理解：正面看体操运动员玩单杠
translate3D（）
translateZ(z)//z轴平移
transform:translate3d(x,y,z)//从当前位置向z轴移动。
scale3D（）
transform:scaleZ(z)//z轴缩放
transform:scale3d(x,y,z)//从当前3d缩放。
坐标原心
transform-origin:25% top;
矩阵
transform:matrix(a,b,c,d,tx,ty);
指定嵌套元素是怎样的三维空间
transform-style:flat|preserve-3d;
perspective属性
指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。
perspective属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。
三维元素在观察者后面的部分不会绘制出来，即z轴坐标值大于perspective属性值的部分。
属性值为0或负值或none（none是默认值）时，没有透视效果
perspective:number|none;
perspective-origin属性
指定透视点的位置。
perspective-origin:x-axisy-axis;
perspective-origin:50%50%;//默认值
backface-visibility
指定元素背面面向用户时是否可见
backface-visibility:visible|hidden;
