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 属性