在css中有些属性有时候会混用，导致记忆混乱，在这总结一下
Transform
变换，可对元素进行位移，旋转，缩放，倾斜操作，支持2D或3D旋转
transform 的操作属性：
（1）translate 位移
（2）route 旋转
（3）scale 缩放
（4）skew 斜切
translate 位移
transform:translate(x,y) //第一个参数指定x轴的偏移量，第二个指定y轴偏移量
transform:translateX（x）
transform:translateY(y)
transform:translate3D(x,y,z)
经典应用:当元素宽高不固定时，实现水平垂直居中
<div class='box'>
<div class='center'></div>
</div>
.box{
position:relative;
width:300px;
height:300px;
border:1px solid red;
}
.center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
//或者 transform:translate3d(-50%,-50%,0);
}
route 旋转
使用规则：
transform:route(deg) //2d旋转根据指定角度进行旋转
transform:route3D(x,y,z,deg) //3d旋转，必须指定4个参数，前三个旋转方向，最后一个角度
transform:routeX() //指定x轴旋转
transform:routeY() //指定Y轴旋转
transform:routeZ() //指定Z轴旋转
scale 缩放
使用规则：
transform:scale(x,y) //指定x轴缩放倍数，指定y轴缩放倍数，第二个参数不传时取第一个
transform:scaleX(x)
transform:scaleY(y)
transform:scaleZ(z)
transform:scale3D(x,y,z)
4431182-3c84f133d6e9fca7.png
