Как сделать чтобы у меня 3д анимация вращения не плавала в дополнительной плоскости?

Чтобы создать 3D анимацию вращения без плавания в дополнительной плоскости, необходимо использовать свойство transform-style: preserve-3d.

Когда вы работаете с 3D анимацией в CSS, элементам можно задать свойство perspective, чтобы создать иллюзию трехмерного пространства. Затем, с помощью свойства transform, можно изменять положение, поворот и масштаб элемента.

Однако, если в вашей анимации есть дочерние элементы, по умолчанию они будут находиться на дополнительных плоскостях, что может вызывать плавание. Чтобы предотвратить это, нужно использовать свойство transform-style: preserve-3d.

Пример кода:

.container {
  perspective: 1000px;
}

.element {
  width: 200px;
  height: 200px;
  background-color: red;
  transform-style: preserve-3d;
  animation: rotate 5s infinite linear;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

В этом примере, .container является родительским элементом, у которого задано свойство perspective. Это позволяет создать эффект глубины при анимации.

.element - это элемент, который будет вращаться в 3D пространстве. Свойство transform-style: preserve-3d гарантирует, что его дочерние элементы останутся на одной плоскости.

В @keyframes анимация rotate вращает элемент по оси Y на 360 градусов.

В итоге, эта анимация будет 3D вращаться без плавания в дополнительных плоскостях.