CSS中可以通過transform屬性來實(shí)現(xiàn)文字旋轉(zhuǎn),可以使用rotate()函數(shù)對文字進(jìn)行旋轉(zhuǎn)。以下是一些實(shí)現(xiàn)文字旋轉(zhuǎn)的方法:
/*將文字順時針旋轉(zhuǎn)45度*/ .rotate{ transform: rotate(45deg); } /*將文字逆時針旋轉(zhuǎn)30度*/ .rotate{ transform: rotate(-30deg); } /*將文字旋轉(zhuǎn)180度*/ .rotate{ transform: rotate(180deg); }
上述代碼中,rotate()函數(shù)中的參數(shù)為旋轉(zhuǎn)角度,可以是正值也可以是負(fù)值,單位為度(deg)。
除了使用rotate()函數(shù)進(jìn)行文字旋轉(zhuǎn),還可以使用skew()函數(shù)來傾斜文字,示例如下:
/*將文字向右傾斜20度*/ .skew{ transform: skewX(20deg); } /*將文字向上傾斜10度*/ .skew{ transform: skewY(-10deg); } /*將文字向右上方傾斜30度*/ .skew{ transform: skew(30deg,-30deg); }
與rotate()函數(shù)類似,skew()函數(shù)也可以接受一個或兩個參數(shù),分別表示水平傾斜角度和垂直傾斜角度。
需要注意的是,使用transform屬性進(jìn)行文字旋轉(zhuǎn)或傾斜時,要將元素的顯示類型設(shè)置為塊級元素或內(nèi)聯(lián)塊級元素,以便正確顯示效果。