3D Transform по окружности вокруг оси Х

Я пытаюсь создать CSS анимацию, которая выглядит, как вращение вокруг картинки или другого объекта div вокруг оси "Х".
Мне удалось создать примерное представление о нем по адресу: Codepen, но анимированные div не имеют эффекта вращения, который я ищу.
Я думаю, мне нужно добавить в какой-то элемент rotateX (), чтобы преобразовать и добавить перспективу, но я просто не могу понять, какую нужно комбинацию. Я приложил примерный образ такой анимации, которую пытаюсь получить.
Здесь мой текущий код анимации:
@keyframes moveBack { 0%{transform:translateY(0); z-index:10;} 25%{transform:translateY(435px); z-index:10;} 26%{z-index:0;} 50%{transform:translateY(0) scale(.8); z-index:0;} 75%{transform:translateY(-435px); z-index:0;} 76%{z-index:10;} 100%{transform:translateY(0); z-index:10;} }

Источник: 3D Transform around circle on the X axis
Вы можете попробовать использовать эффект CSS3 - 3D вращение, например: transform:rotateX(-100deg); вот ссылка с более подробной информацией - w3schools.com @Kyle Pastor

Ответ

Здесь есть простая 3D-транзакция, которая выглядит так, как вы пытаетесь получить. Вопрос в том, что вы используете translate для перемещения, но ваша цель - вращать по оси x. Для запуска вращения, наведите курсор на див (прямоугольник):
div{ position:relative; width:300px; height:200px; margin:10% auto; perspective:500px; transform-style:preserve-3d; border:1px solid #000; } img{width:100%;} p{ position:absolute; left:250px; top:75px; width:80px; height:40px; margin:0; padding:5px 10px; background:gold; transform: rotateX(0deg) translatez(110px); transition:transform 2s; } div:hover p{ transform: rotateX(360deg) translatez(110px); }

Hover the div

Если вы хотите, вращающийся див, ориентировать всегда одной стороной к лицу пользователя, то вы можете добавить следующий поворот, после такой translatez:
div{ position:relative; width:300px; height:200px; margin:10% auto; perspective:500px; transform-style:preserve-3d; border:1px solid #000; } img{width:100%;} p{ position:absolute; left:250px; top:75px; width:80px; height:40px; margin:0; padding:5px 10px; background:gold; transform: rotateX(0deg) translatez(130px) rotateX(0deg); transition:transform 5s; } div:hover p{ transform: rotateX(360deg) translatez(130px) rotateX(-360deg); }

Hover the div

Это работает, потому что, когда вы выполняете цепочку преобразования свойств на одном и том же объявлении, последний выполняется по окончанию предыдущего из них. Система координат движется с предыдущими преобразованиями.
Перевод ответа: 3D Transform around circle on the X axis @web-tiki