CSS3 旋轉角度調整讓我們可以輕松地將元素旋轉到指定角度,從而實現更加豐富的頁面效果。
.rotate { transform: rotate(45deg); }
上面的代碼會將元素旋轉 45 度,實現斜角效果。除了 rotate() 函數,我們還可以使用 skew() 函數來實現更加特殊的旋轉效果。
.skew { transform: skew(30deg, 45deg); }
上面的代碼會將元素橫向和縱向分別傾斜 30 度和 45 度,實現一個翹邊效果。
需要注意的是,旋轉角度是根據元素中心點進行旋轉的,默認情況下為元素中心點,如果我們想要改變旋轉中心點,可以使用 transform-origin 屬性,指定中心點坐標。
.rotate-origin { transform-origin: 50% 50%; transform: rotate(45deg); }
上面的代碼將中心點設置為元素中心點,然后進行旋轉。
CSS3 旋轉是一個重要的效果,可以為頁面帶來更多的設計想象空間,讓我們的頁面效果更加豐富多彩。
上一篇css3旋轉加平移