CSS中的塊旋轉(zhuǎn)是一種常用的效果,可將整個塊繞著中心點(diǎn)進(jìn)行旋轉(zhuǎn),是網(wǎng)頁動畫效果中常用的一種。我們可以使用CSS的transform屬性來實現(xiàn)這一效果。
.rotate { transform: rotate(30deg); }
上述代碼中,rotate是一個自定義的類名,我們可以將它添加到需要旋轉(zhuǎn)的HTML元素中,如div、p等。
rotate(30deg)中的參數(shù)30表示旋轉(zhuǎn)的角度,deg代表角度,可以取正數(shù)或負(fù)數(shù),旋轉(zhuǎn)的中心點(diǎn)是元素的中心點(diǎn)。若需要沿某一邊旋轉(zhuǎn),則需要設(shè)定該邊距離中心點(diǎn)的距離,如下:
.rotate { transform: rotate(30deg) translateX(50px); }
translateX(50px)中的50px表示元素沿著X軸方向向右移動50像素。
需要注意的是,CSS的塊旋轉(zhuǎn)只能在現(xiàn)代瀏覽器中運(yùn)行,對于IE瀏覽器可能出現(xiàn)兼容性問題。
下一篇css中的中間英文