CSS offset-rotate 屬性
- 上一頁 offset-position
- 下一頁 opacity
定義和用法
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 動畫
- 上一頁 offset-position
- 下一頁 opacity