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