在css中可以通過(guò)rotate函數(shù)設(shè)置角度，使用語(yǔ)法是“rotate(a)”，其中參數(shù)a指定了rotate()的旋轉(zhuǎn)程度，參數(shù)為正時(shí)，則是順時(shí)針旋轉(zhuǎn)；參數(shù)為負(fù)時(shí)，則為逆時(shí)針旋轉(zhuǎn)。

本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版，DELL G3電腦

css怎么設(shè)置角度？

rotate()

CSS的rotate()函數(shù)定義了一種將元素圍繞一個(gè)定點(diǎn)（由transform-origin屬性指定）旋轉(zhuǎn)而不變形的轉(zhuǎn)換。指定的角度定義了旋轉(zhuǎn)的量度。若角度為正，則順時(shí)針?lè)较蛐D(zhuǎn)，否則逆時(shí)針?lè)较蛐D(zhuǎn)。旋轉(zhuǎn)180°也被稱為點(diǎn)反射。

元素旋轉(zhuǎn)的固定點(diǎn) – 如上所述 – 也稱為變換原點(diǎn)。這默認(rèn)為元素的中心，但你可以使用transform-origin屬性設(shè)置自己的自定義變換原點(diǎn)。

語(yǔ)法

<angle> 指定了 rotate() 的旋轉(zhuǎn)程度。參數(shù)為正時(shí)，順時(shí)針旋轉(zhuǎn)；參數(shù)為負(fù)時(shí)，逆時(shí)針旋轉(zhuǎn)。180° 旋轉(zhuǎn)稱為點(diǎn)反演。

rotate(a)

值 a 是一種<angle>，表示旋轉(zhuǎn)的角度。 正角度表示了順時(shí)針的旋轉(zhuǎn)，負(fù)角度表示逆時(shí)針的旋轉(zhuǎn)。

示例

HTML

<div>Normal</div> <div class="rotated">Rotated</div>

CSS

div {   width: 80px;   height: 80px;   background-color: skyblue; } .rotated {   transform: rotate(45deg); /* Equal to rotateZ(45deg) */   background-color: pink; }

結(jié)果

【推薦學(xué)習(xí)：css視頻教程】