CSS中可以通過transform屬性對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、傾斜等操作,其中對(duì)div元素進(jìn)行90度旋轉(zhuǎn)的方法如下:
div {
transform: rotate(90deg);
}
在代碼中,先選中需要進(jìn)行旋轉(zhuǎn)的div元素,然后使用transform屬性,將旋轉(zhuǎn)函數(shù)rotate()作為值傳入,最后指定旋轉(zhuǎn)的度數(shù)為90度。
此方法還可以通過添加transition屬性來實(shí)現(xiàn)動(dòng)畫效果,如以下代碼:
div {
transform: rotate(90deg);
transition: transform 1s;
}
div:hover {
transform: rotate(180deg);
}
在上述代碼中,通過添加transition屬性,指定旋轉(zhuǎn)動(dòng)畫的時(shí)長(zhǎng)為1秒。然后在:hover偽類中,指定鼠標(biāo)懸停時(shí)旋轉(zhuǎn)到180度,實(shí)現(xiàn)了翻轉(zhuǎn)的動(dòng)畫效果。