仅使用CSS从中心旋转三角形图像？

Question

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

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

这是我到目前为止所拥有的：

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

要获取三角形的中心：

（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'/>

Answer 2

这是一个等边三角形，因此中心不是图像的中心，您应该像这样调整transform-origin。

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

#loading {
  animation: rotation 2s infinite linear;
  transform-origin: calc(100% / 2) calc(100% * 2 / 3);
  /* transform-origin: 50%  66.666% */
}

@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' />

关于计算细节，我们具有以下方程式：

a² + c² = b²
c  + b  = Height
a² + Height² = (2a)²
2a = Width

解决后，我们将获得：

a = 1/2 * Width   (50%)
b = 2/3 * Height  (66.666%)
c = 1/3 * Height