变形包括2d变形和3d变形
transform2D变形
transform(none|<transform-function>+)，可以写多个方法一起
但是要注意各个动作的先后顺序，因为变形时会变动元素的X、Y轴。
rotate旋转
rotate:<angle>
none为默认值，无旋转
angle值为角度角度值，顺时针为正，逆时针为负
例：transform:rotate(30deg);，意为以中心点为基准旋转30度（基准可以变动）。x、y轴在左上角，坐标0，0
translate移动
translate(<translation-value> [<translation-value>]?)
等价于
translateX(<translation-value>)
translateY(<translation-value>)
可以是百分比，也可以是绝对值可以是负值
例：transform:translate(50% 50%);，意为向右移动50%，向下移动50%。
scale缩放
scale(<number>[,number>]?)意为可以有2个值，以逗号分隔，相等则可省
等价于
scaleX(<number>)
scaleY(<number>)
例：transform:scale(1 , 1.2);，意为以中心点为基准，在X轴放大1倍（不变），在Y轴放大1.2倍。
skew倾斜（压扁或拉伸）
skew(<angle>[,<angle>]?)，若第二个轴缺省时为默认值0deg
等价于
skewX(<angle>)Y轴向X轴的正方向倾斜（正值时）
skewY(<angle>)X轴向Y轴的正方向倾斜（正值时）
变动的是物体的X、Y轴
例：transform:skew(30deg 15deg);，意为以中心点为基准y轴向x轴正方向倾斜30度，y轴向x轴正方向倾斜15度。
transform-origin改变动作基点（较多用于旋转）
transform-origin:
[left|center|right|top|bottom|<percentage>|<length>]
|[left|center|right|<percentage>|<length>][top|center|bottom|<percentage>|<length>]<length>?
|[center|[left|right]]&&[center|[top|bottom]]<length>?
可以是三组值中的任意一组：
第一组是指关键字
第二组是分别设置X、Y、Z三个轴（Z轴只有长度）
第三组是分别设置X、Y、Z三个轴上的关键字
例：transform-origin:50% 50%;，意为以x轴的50%、y轴的50%位置进行旋转。当值缺省时为默认值50%
perspective透视
perspective:none|<length>;，none为默认值，无透视效果，默认以中心点为基准，长度为离开基准的距离，值越大透视效果越不明显
perspective-origin，改变基准，与transform-origin一样
translate3d()3d移动
比translate多一个z轴参数，值为数值，正值靠近，负值远离（在视觉效果上近大远小）。
scale3d()3d缩放
与其他动作结合时注意先后顺序，先缩放的话有倍率效果
rotate3d()3d旋转
rotate3d(<number>,<number>,<number>,<angle>);
前三个值用三维坐标选取旋转点，以该点与坐标原点的连线作为旋转轴进行旋转
元素变形嵌套
还需要增加设置是否扁平化，因为元素设置了3d变形后默认设置其内部元素进行了扁平化，取消了3d变形
transform-style:flat|preserve-3d;
flat为默认值，扁平化
preserve-3d为保留3d空间
元素反转后背面是否可见的设定
backface-visibility:visible|hidden;
为3d元素的背面是否可见的设定，默认为可见的
用于元素旋转组合之后的单个显示的设定
