CSS3 3D傾斜是一種新的CSS3屬性,它可以使元素看起來像是傾斜的。
transform: skewX(30deg);
上面的代碼將元素向右傾斜30度。同樣的,我們也可以使用skewY屬性將元素向上或向下傾斜。
transform: skewY(-10deg);
上面的代碼將元素向上傾斜10度。如果我們想要同時應(yīng)用X軸和Y軸的傾斜,我們可以使用skew屬性:
transform: skew(30deg, -10deg);
這將元素向右傾斜30度,并向上傾斜10度。
除了傾斜,我們還可以使用rotate屬性進行旋轉(zhuǎn)。和skew類似,我們可以使用rotateX和rotateY屬性分別旋轉(zhuǎn)X軸和Y軸。
transform: rotate(45deg);
上面的代碼將元素以中心為軸旋轉(zhuǎn)45度。
在使用這些3D屬性時,我們可以使用perspective屬性控制元素的透視。透視決定了元素相對于視圖的大小和位置。
perspective: 100px;
上面的代碼將元素的透視定為100像素。當我們使用旋轉(zhuǎn)或傾斜屬性時,元素的表現(xiàn)會更加逼真。
上一篇css3 水波動畫
下一篇css3 水平進度條