Поворот изображения треугольника из центра только с помощью 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