在css中有些屬性有時(shí)候會(huì)混用苦丁，導(dǎo)致記憶混亂浸颓，在這總結(jié)一下
Transform
變換，可對(duì)元素進(jìn)行位移旺拉，旋轉(zhuǎn)产上，縮放，傾斜操作蛾狗，支持2D或3D旋轉(zhuǎn)
transform 的操作屬性：
（1）translate 位移
（2）route 旋轉(zhuǎn)
（3）scale 縮放
（4）skew 斜切
translate 位移
transform:translate(x,y) //第一個(gè)參數(shù)指定x軸的偏移量晋涣，第二個(gè)指定y軸偏移量
transform:translateX（x）
transform:translateY(y)
transform:translate3D(x,y,z)
經(jīng)典應(yīng)用:當(dāng)元素寬高不固定時(shí)，實(shí)現(xiàn)水平垂直居中
<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 旋轉(zhuǎn)
使用規(guī)則：
transform:route(deg) //2d旋轉(zhuǎn)根據(jù)指定角度進(jìn)行旋轉(zhuǎn)
transform:route3D(x,y,z,deg) //3d旋轉(zhuǎn)沉桌，必須指定4個(gè)參數(shù)谢鹊，前三個(gè)旋轉(zhuǎn)方向算吩，最后一個(gè)角度
transform:routeX() //指定x軸旋轉(zhuǎn)
transform:routeY() //指定Y軸旋轉(zhuǎn)
transform:routeZ() //指定Z軸旋轉(zhuǎn)
scale 縮放
使用規(guī)則：
transform:scale(x,y) //指定x軸縮放倍數(shù)，指定y軸縮放倍數(shù)佃扼，第二個(gè)參數(shù)不傳時(shí)取第一個(gè)
transform:scaleX(x)
transform:scaleY(y)
transform:scaleZ(z)
transform:scale3D(x,y,z)
4431182-3c84f133d6e9fca7.png
