逆战班css3transform变形属性详解
Css3 transform主要包含了位移，缩放，旋转，斜切这⼏种。
1.位移（translate）
transform：translate(X,Y) X和Y分别代表在X轴和Y周所移动的值。
transfrom: translateX() 只在X轴上进⾏移动的值
transfrom: translateY() 只在Y轴上进⾏移动的值
transfrom: translateZ() 只在Z轴上进⾏移动的值(3d写法)
例：transform:translate(X,Y)，代码如下：
该代码实在原图的基础上向X轴移动100px，向 Y轴移动100px
2.缩放（scale）
transform:scale(num) num是⼀个⽐例制，正常⽐例为1
transform:scale(num1 num2) num1 num2分别对应X和Y
transform:scaleX(num) 只在X轴上缩放num个值
transform:scaleY(num) 只在Y轴上缩放num个值
transform:scaleZ(num) 只在Z轴上缩放num个值(3d写法)
例: trabsform:scale(num)
该代码实在原图的基础上扩⼤了2倍，原来的值时100px,⽽现在的值变成了200px，是原来的2倍。
3.旋转（rotate）
transform:rotate(num) num是旋转的⾓度
单位是⾓度（deg）或弧度（rad）
当num为正值时，进⾏顺时针旋转
当num为负值时，进⾏逆时针旋转
rotateX(num) 只在X轴上旋转num个值(3d写法)
rotateY(num) 只在Y轴上旋转num个值(3d写法)
rotateZ(num) 只在Z轴上旋转num个值
例：transform:rotate(num)
该代码是在原图的基础上旋转了30度
4.斜切（skew）
transform:skew(num1 ,num2) num1和num2都是⾓度，针对X和Y transform:skewX(num) 只在X轴上斜切num个值
transform:skewY(num) 只在Y轴上斜切num个值
例：transform:skewX(num)
该代码实在原图的基础上斜切了30度
5.注意事项
rotate()跟rotateZ()时等价关系
skew没有3d写法
所有的变形操作，都不会影响到其他元素
变形操作对inline（内敛元素）不起作⽤
transform可以同时设置多个值，先执⾏后⾯的操作，在执⾏前⾯的操作位移会收到后⾯要执⾏的缩放，旋转和斜切的影响
