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

#css #html5 #css3 #анимация #svg

Я пытаюсь создать 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
    

Ответы

Ответ 1

Здесь есть простая 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





Это работает, потому что, когда вы выполняете цепочку преобразования свойств на одном
и том же объявлении, последний выполняется по окончанию предыдущего из них. Система
координат движется с предыдущими преобразованиями.   

Источник