css 中的Transfrom

在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