在CSS樣式表中,度數是用于定義旋轉角度的一種度量方式。由于旋轉可以繞不同的軸進行,因此需要定義一個旋轉角度,并且還需要確定旋轉的軸線。在不同的場景下,度數表示法也會稍有不同。
.rotate { transform: rotate(30deg); /* 順時針旋轉30度 */ transform-origin: left top; /* 以左上角為中心點旋轉 */ }
如上代碼中,可以看到,"rotate()"函數接收的是一個度數,假設為x,那么它的旋轉角度就是x度。如果將x改為一個小數,例如0.5,那么它的旋轉角度就是x * 360度,即180度。如果將x改為負數,例如-30deg,那么就是逆時針方向旋轉30度。
此外,在定義旋轉軸線時,也需要使用到度數表示法。默認的軸線是元素自身的中心點。如果需要以其他點或者方向為基準點進行旋轉,可以使用"transform-origin"屬性。
.rotate { transform: rotate(30deg); /* 順時針旋轉30度 */ transform-origin: left top; /* 以左上角為中心點旋轉 */ }
如上代碼中,"transform-origin"的值是"left top",這意味著旋轉動作以元素的左上角為中心點。此外,可以設置為百分比值,例如"50% 50%",這表示以元素中心點為中心進行旋轉。也可以設置為關鍵詞值,例如"bottom right",這表示以元素的右下角為中心點進行旋轉。