css怎麼設定角度

liuxuhui發表於2021-09-11

在css中可以透過rotate函式設定角度,使用語法是“rotate(a)”,其中引數a指定了rotate()的旋轉程度,引數為正時,則是順時針旋轉;引數為負時,則為逆時針旋轉。

css怎麼設定角度

本文操作環境:windows7系統、HTML5&&CSS3版,DELL G3電腦

css怎麼設定角度?

rotate()

CSS的rotate()函式定義了一種將元素圍繞一個定點(由transform-origin屬性指定)旋轉而不變形的轉換。指定的角度定義了旋轉的量度。若角度為正,則順時針方向旋轉,否則逆時針方向旋轉。旋轉180°也被稱為點反射。

元素旋轉的固定點 - 如上所述 - 也稱為變換原點。這預設為元素的中心,但你可以使用transform-origin屬性設定自己的自定義變換原點。

語法

<angle> 指定了 rotate() 的旋轉程度。引數為正時,順時針旋轉;引數為負時,逆時針旋轉。180° 旋轉稱為點反演。

rotate(a)

值 a 是一種<angle>,表示旋轉的角度。 正角度表示了順時針的旋轉,負角度表示逆時針的旋轉。

8fc58c22af788fd98c907be2f847e8a.png

示例

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;
}

結果

e20f1fffc85c9d775c4cbd9ee97d64b.png

【推薦學習:】

以上就是css怎麼設定角度的詳細內容,更多請關注php中文網其它相關文章!

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/756/viewspace-2827720/,如需轉載,請註明出處,否則將追究法律責任。

相關文章