CSS3 2D轉(zhuǎn)換 2.旋轉(zhuǎn)rotate()

提問(wèn)人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-19

在這之前，在頁(yè)面中所能得到的盒子模型都是整整齊齊地端坐在頁(yè)面當(dāng)中，從來(lái)沒(méi)有得到過(guò)一個(gè)歪的盒子模型，現(xiàn)在可以使用CSS3中的轉(zhuǎn)換對(duì)元素進(jìn)行旋轉(zhuǎn)操作了。

使用rotate()方法可以在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)元素。負(fù)值是允許的，會(huì)使元素逆時(shí)針旋轉(zhuǎn)。通過(guò)這個(gè)方法可以完成對(duì)元素的旋轉(zhuǎn)操作。

通過(guò)一個(gè)實(shí)例來(lái)了解rotate()方法。

【例題】使用rotateO方法

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

div{

width: 200px;

height: 200px;

background: blue;

margin:100px;

}

div:hover{

transform: rotate(45deg);

}

</style>

</head>

<body>

</body>

</html>

相關(guān)視頻回答

回復(fù)(0)