CSS offset-rotate 属性-之路教程

CSS offset-rotate 属性值说明

值	描述
auto	物体通过偏移路径的方向的角度旋转。
reverse	物体通过偏移路径的方向加180度旋转。
<angle>	该盒子具有通过指定的旋转角度施加到它的恒定顺时针旋转变换。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

语法

offset-rotate: auto | reverse | <angle>;

offset-rotate 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 70px;
        height: 70px;
        background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
        position: absolute;
        left: 40%;
        top: 100px;
        offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
        offset-rotate: reverse;
        animation: move 4s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
    <body>
      <h2>Offset-rotate 属性示例</h2>
      <div class="mover"></div>
    </body>
</html>

CSS offset-rotate 属性

offset-rotate 属性根据元素沿偏移路径的偏移距离指定元素的方向。

在规范的早期版本中，这个属性被称为motion-rotation，然后它变成了offset-rotation，现在它被称为offset-rotate。

此属性具有以下值：auto、reverse、<angle>。

初始值	auto
应用于	可变形元素。
继承	无效
可动画的	是的。
版本	运动路径模块级别1
DOM 语法	object.Style.OffsetRotate =“auto 90deg”;

日期：2020-06-02 22:14:41 来源：oir作者：oir

←CSS offset-position 属性

CSS 偏移属性→

CSS offset-rotate 属性值说明

语法

offset-rotate 属性示例：

目录