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

258

17 февраля 2017, 03:27

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

комментарии:

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

Answer 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); 
}

<div> 
  <img src="http://i.imgur.com/k8BtMvj.jpg"/> 
  <p>Hover the div</p> 
</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); 
}

<div> 
  <img src="http://i.imgur.com/k8BtMvj.jpg"/> 
  <p>Hover the div</p> 
</div>

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

Ответил: @web-tiki

Создание сайта для доставки еды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Почему не работает анимация и не которые свойства CSS3 на моб Iphone?

Доброго всем дня!

379

CSS

Как сделать маску для ie edge или clip-path?

Добрый день, мне нужно сделать маску для изображения, но ie edge не понимает это свойство: clip-path: polygon(0 0,100% 15%,100% 100%,0 85%); Я прочитал что можно сделать...

629

c++

Разное поведение программы на Win7 и WinXP

Есть такой код (минимальный рабочий пример):

345

c++

Как определить, есть ли буквы в строке? C++

Как определить, есть ли буквы в строке без функций и очень коротко(буквы любые - и латинские, и русские)

548