transform屬性---3D位置移動(dòng)
translate3d(x,y,z)
定義:基于原來(lái)的位置,沿X軸平移,長(zhǎng)度為x,沿Y軸平移,長(zhǎng)度為y,沿Z軸平移,長(zhǎng)度為z
語(yǔ)法:
transform:translate3d(x,y,z);
transform屬性---3D縮放
scale3d(x,y,z)
定義:基于原來(lái)的位置進(jìn)行伸縮變換,其中x代表沿X軸的伸縮倍數(shù),y代表沿Y軸的伸縮倍數(shù),z代表沿Z軸的伸縮倍數(shù)
語(yǔ)法:
transform:scale3d(x,y,z);
transform:scale(1.1);
transform屬性---2D旋轉(zhuǎn)
transform: rotate(45deg);
transform屬性---2D移動(dòng)(小米懸停)
transform:translate(x,y);
transform:translate(0,-10px);
小案例:小米懸停
.wapper li{
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
}
.wapper li:hover {
transform:translate(0,-10px);
-webkit-transform:translate(0,-10px);
-moz-transform:translate(0,-10px);
-o-transform:translate(0,-10px);
-ms-transform:translate(0,-10px);
-webkit-box-shadow:0px 5px 15px #e5e5e5;
-moz-box-shadow:0px 5px 15px #e5e5e5;
box-shadow:0px 5px 15px #e5e5e5;
}
transform屬性---3D縮放轉(zhuǎn)換
translate3d(x,y,z)