CSS offset-rotate egenskap

定义和用法

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

Relaterade sidor

Lärord:SVG-path

Lärord:CSS-animation

Referens:CSS offset egenskap

Referens:CSS offset-anchor egenskap

Referens:CSS offset-distance egenskap

Referens:CSS offset-path egenskap

Referens:CSS offset-position egenskap