一、2D变形
css3中三大功能：
1）过度：transition
2）动画：animation
3）变形：transform ie9开始兼容
1.旋转：
语法：
transform:rotate(30deg);
totate:角度单位，一圈360deg,一圈π，弧度，弧度=角度*π / 180,一弧度=π=180deg π弧度=180deg
正方向：垂直向上为0deg，顺时针方向为正方向(水平向左为90deg，)
旋转角度：+(顺时针旋转) - (逆时针旋转)，
transform:rotate(90deg)
==>
transform:rotate(-270deg)
注意：任何变形都可以被过度，
2.缩放变形
语法：transform:scale(1,3);
scale：缩放，数字，大于1表示放大，小于1表示缩小，
scale(1.2,0.5);
参数1：横向放大1.2倍，
参数2：纵向缩小0.5倍
transform:scaleX(1,2);scaleY(0.5);
3.拉伸变形
语法：transform:skew(30deg,60deg);
skew:歪斜扭曲，两个值分别是横向扭曲角度和纵向扭曲角度，
transform:skewX(30deg) skew(60deg);
总结：2D变形有三种，旋转缩放扭曲
transform:rotate(30deg)scale(2,0.4) skew(20deg,30deg)
二、3D变形
1.舞台与演员的关系， ie10开始兼容
3D变形与2D变形事实上多了一个舞台的概念，舞台的作用是负责添加景深，(perspective),单位px，表示您的眼睛距离这个舞台的
距离，也可以理解为3D变形元素的陡峭程度，演员就是其中的变形元素，使用transform进行变形
2. rotateX(ndeg);
绕着X轴翻转n度
n为正数，向后翻
n为负数，向前翻
3.rotateY(ndeg);
绕着y轴翻转n度
n为正数，向右翻
n为负数，向左翻
4.rotateZ(ndeg);
绕着z轴翻转n度
Z轴：位于x轴和y轴交叉点，方向垂直变形元素所在的平面，正方向是该平面正面对的方向
n为正数，顺时针
n为负数，逆时针
5.rotate3d(a,b,c,d)
a,b,c 0|1|-1
a:x轴。x轴不旋转，1：向后旋转，-1：x轴向前翻转
b:y轴。y轴不旋转，1：向右旋转，-1：y轴向左翻转
c:z轴。z轴不旋转，1：顺时针旋转，-1：逆时针翻转
n:表示旋转的角度
rotate3d(1,0,-1,30deg);x轴向后，y轴不转，z逆时针旋转30deg