css - 编辑 .svg 以制作动画 - XML

Question

有人可以帮我正确旋转该图像的磁盘吗？ 我尝试过一些东西(如果你运行代码)，但没有成功。但磁盘有跳动 它应该看起来像这样:https://mensis.ro/wp-content/uploads/2019/12/Logo-Doors.gif

<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 50 50"
to="360 50 50"
dur="10s"
repeatCount="indefinite" />

完整代码:https://pastebin.com/d7Ur54ZB

谢谢!

Answer 1

为了防止圆盘跳动，必须正确指示旋转中心。
CSS 规则可以帮助您做到这一点:transform-box: fill-box

添加到您的应用程序:

#disk{
    transform-origin: center center;
    transform-box: fill-box;
    animation: rotate_disk 10s linear forwards infinite;
  }

  @keyframes rotate_disk {
    100% {
        transform: rotateZ(360deg);
    }
  }

---

CODEPEN

---