仅使用 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

这是一个等边三角形，所以中心不是图像的中心，你应该这样调整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

Answer 2

要获得三角形的中心：

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

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

Rotating a triangle image from the center using CSS only?

css

css-transforms

css-animations