CSS offset-rotate 屬性

定義和用法

offset-rotate 屬性用于設置沿路徑移動的動畫元素的旋轉角度。

實例

例子 1

設置沿路徑移動的三個 <img> 元素的旋轉角度:

#fish1 {
  offset-rotate: auto;
}
#fish2 {
  offset-rotate: auto 90deg;
}
#fish3 {
  offset-rotate: 90deg;
}

親自試一試

例子 2

使用 turn 單位而不是 deg 指定元素的旋轉角度:

div {
  offset-rotate: 0.25turn;
}

親自試一試

CSS 語法

offset-rotate: auto|angle|initial|inherit;

屬性值

描述
auto 元素面向其沿路徑移動的方向。默認值。
angle 指定以恒定角度旋轉元素的角度。
auto angle 同時指定 auto 和 angle,角度會添加到默認旋轉角度上,順時針方向。
reverse 元素以與默認旋轉相反的方向旋轉。
initial 將此屬性設置為其默認值。參閱 initial
inherit 從其父元素繼承此屬性。參閱 inherit

技術細節

默認值: auto
繼承性:
動畫制作: 支持。請參閱:動畫相關屬性
版本: CSS3
JavaScript 語法: object.style.offsetRotate="45deg"

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
56 79 72 16 43

相關頁面

教程:SVG 路徑

教程:CSS 動畫

參考:CSS offset 屬性

參考:CSS offset-anchor 屬性

參考:CSS offset-distance 屬性

參考:CSS offset-path 屬性

參考:CSS offset-position 屬性