Как сгладить вращение трехмерного преобразования?

Question

Я работал над трехмерным изображением, созданным с помощью CSS, идея заключалась в том, чтобы добавить к нему какую-то анимацию и использовать его в качестве центрального элемента в моем портфолио, к сожалению, у меня возникли проблемы с отображением анимациигладкий; плавный.

Я не уверен, вызвано ли это ограничением CSS-анимации или тем, что я работаю в 3D, но я не смог заставить его выглядеть совершенно правильно.

До сих пор я пробовал много разных значений, а также добавлял больше ключевых кадров в надежде, что анимация сгладится, но мне не повезло.

У меня есть Codepen со всем кодом,его можно найти здесь .

Я поместил указанную анимацию ключевого кадра вверху файла CSS, он называется loading-cube

Если я не смотрю на это слишком долго, и мои глаза разыгрывают меня,анимация в том виде, в каком она есть в данный момент, имеет «отскок».

Этот кодовый кубик - более точное представление о том, как бы я хотел, чтобы мой поворот выглядел.

Answer 1

Ваш порядок двух разных вращений неверен, вы должны установить rotateX перед rotateY.Если вы сделаете это, анимация станет намного проще: поворот на 360 градусов по оси Y:

@keyframes loading-cube {
  0%  {transform: translateZ(-800px) rotateX(-19deg) rotateY(0deg);}
  100%  {transform: translateZ(-800px) rotateX(-19deg) rotateY(360deg);}
}

отредактированная демонстрация