transform变形
一、定义
transform属性应用于元素的2D或3D转换，这个属性可以使元素旋转，缩放，移动，倾斜等。
二、属性和用法
1、translate : 位移
transform:translate(100px,100px); 两个值 分别对应 x轴 和 y轴。
transform:translateX(100px);只针对x轴
transform:translateY(100px);只针对y轴
transform:translateZ(100px); ( 3d效果 ) 垂直电脑屏幕方向
2、scale : 缩放
transform:scale(num) ;num是一个比例值，正常比例是1。
transform:scale(num1 , num2) ; 两个值 分别对应 w 和 h
transform:scaleX()
transform:scaleY()
transform:scaleZ() ( 3d效果 )
3、rotate : 旋转
transform:rotate(num); num是旋转的角度； 如：30deg、-30deg
正值：顺时针旋转
负值：逆时针旋转
表示一个角：角度deg 或 弧度rad
rotateX() ( 3d效果 )
rotateY() ( 3d效果 )
rotateZ()
注 : rotate()跟rotateZ()是等价关系。
4、skew : 斜切
transform:skew(num1,num2) ; num1和num2都是角度，单位是deg，针对的是x轴 和 y轴。
transform:skewX()
transform:skewY()
注：skew没有3d写法。
注：所有的变形操作，都不会影响到其他元素。(类似于相对定位)
注：变形操作对inline(内联元素)不起作用的。
注：transform可以同时设置多个值。
先执行后面的操作，在执行前面的操作。
位移会受到后面要执行的缩放、旋转和斜切的影响。
我们来看一下多指操作时的情形：
如：
效果：
5、transform-origin 基点位置
主要是针对旋转和缩放，默认都是中心点为基点。
transform-origin的属性值可以是数值也可以是方向：
如：
transform-origin : 150px 150px;
transform-origin : right top;
