Question

我正在尝试使SVG的一部分旋转，但是似乎它绕着一个很大的原点旋转，这令人困惑，因为实际路径非常小。

这是我的路径元素动画css：

.wing1 {
  transform-origin: bottom right;
  animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
  @keyframes spin {
    50% { transform: rotate(45deg); }
    100% { transform: rotate(0deg); }
  }
}

这是JSFiddle（包括SVG）：http://jsfiddle.net/c5g3sq4e/

我正在尝试使wing元素围绕右下角旋转，以使其看起来像在飞行，但是我从未进行过SVG元素旋转，因此不确定我是否正确指定了原点

Answer 1

您需要添加transform-box: fill-box;，这将使对象边界框用作参考框。

.wing1 {
  transform-origin: bottom right;
  transform-box: fill-box;
  animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
  @keyframes spin {
    50% { transform: rotate(45deg); }
    100% { transform: rotate(0deg); }
  }
}

SVG路径旋转动画

1 个答案: