CSS三維旋轉(zhuǎn)可以讓我們的網(wǎng)頁更加生動,具有立體感,而角度是我們控制旋轉(zhuǎn)的重要參數(shù)。
transform: rotateX(90deg);
rotateX是圍繞X軸旋轉(zhuǎn),后面的(90deg)表示旋轉(zhuǎn)的角度,可以改變數(shù)字來調(diào)整旋轉(zhuǎn)的程度。
transform: rotateY(180deg);
rotateY是圍繞Y軸旋轉(zhuǎn),后面的(180deg)表示旋轉(zhuǎn)的角度,同樣可以更改數(shù)字進行調(diào)整。
transform: rotateZ(45deg);
rotateZ是圍繞Z軸旋轉(zhuǎn),后面的(45deg)表示旋轉(zhuǎn)的角度,同樣可以更改數(shù)字進行調(diào)整。
注意,三維旋轉(zhuǎn)時需要使用transform-style: preserve-3d;來保持立體效果。
.container { transform-style: preserve-3d; }
通過三維旋轉(zhuǎn)以及調(diào)節(jié)角度,可以讓我們的網(wǎng)頁呈現(xiàn)出更加立體、真實的效果。