Сравни способы поворота элемента и объясни, когда выбирать каждый вариант.

Способы поворота элемента: `transform: rotate()` (основной, 2D), `rotate3d`/`rotateX/Y/Z` (3D), CSS-свойство `rotate` (новое), SVG-трансформации. Выбор — по 2D/3D и анимации.

Способы

transform: rotate() (основной, 2D)

.el { transform: rotate(45deg); }

• Поворот в плоскости на угол (deg, rad, turn).
• Когда: обычный 2D-поворот. Анимируется на GPU (composite), производительно.

Отдельное свойство rotate (новое)

.el { rotate: 45deg; } /* independent transform */

• Отдельно от transform (можно комбинировать с translate/scale без конфликта).
• Когда: современный код, независимые трансформации.

3D-повороты

.el {
  transform: rotateX(45deg);  /* вокруг оси X */
  transform: rotateY(45deg);  /* вокруг Y */
  transform: rotateZ(45deg);  /* вокруг Z (= rotate) */
  transform: rotate3d(1, 1, 0, 45deg);
}

• Нужен perspective у родителя для 3D-эффекта.
• Когда: 3D-эффекты, карточки-перевороты.

transform-origin

Точка вращения:

.el { transform-origin: top left; } /* вращать вокруг угла */

SVG

<g transform="rotate(45 cx cy)">

• Когда: поворот SVG-элементов.

Производительность

transform: rotate идёт на composite (GPU) — плавные анимации без reflow/repaint. Анимировать поворот именно через transform.

Как выбирать

• 2D-поворот → transform: rotate (или свойство rotate).
• 3D → rotateX/Y/Z + perspective.
• Точка вращения → transform-origin.
• SVG → SVG-трансформации.

Коротко для собеседования

Поворот элемента: transform: rotate(45deg) (основной 2D, анимируется на GPU без reflow), новое свойство rotate (независимо от transform), 3D — rotateX/Y/Z/rotate3d + perspective у родителя, transform-origin — точка вращения, SVG-трансформации. Анимировать через transform (composite, плавно).