css - 仅使用 CSS 从中心旋转三 Angular 形图像？

Question

我正在尝试使用 CSS 从中心旋转三 Angular 形图像。

我可以旋转图像，但它不是从中间旋转。

这是我目前所拥有的:

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#loading {
  animation: rotation 2s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

<img id="loading" src='https://i.postimg.cc/zVSqhnr9/loader.png' border='0' alt='loader' />

这似乎对其位置有一些影响，但我无法正确处理:

transform-origin: 30% 80%;

Answer 1

获取三 Angular 形的中心:

(90, 158/3)

然后，将 (158/3) 减去 158 以获得顶部的 Y 坐标，而不是底部。

---

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#loading {
  transform-origin: 90px 105.3px;
  animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

<img id="loading" src='https://i.postimg.cc/zVSqhnr9/loader.png' border='0' alt='loader'/>