» »

3D-трансформации элементов на CSS3

3D-трансформации элементов на CSS3

Один из промеров CSS3 3D-трансформации, который изначально создает объемные и также реалистичные эффекты анимации, что можно разместить на сайте. Здесь нужно подчеркнуть, что функция 3D-трансформации по своей работе немного отличается от 2D-трансформациями. Есть небольшая разница, которая заключается в том, что заданные элементы изначально могут перемещаться по заданной, а точнее во вдоль оси.

Где может происходить, как вглубь самого экрана, и аналогичным способом из него. Для того, чтоб все корректно работало, то сначала нужно все активировать, где 3D-пространство прописываем свойство perspective, которое предназначено для родительского контейнера.

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

Как пример в рабочем состояние:

3D трансформации с помощью CSS

Установка:

HTML

Код
<div>
  <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/24783615.png" class="front">
  <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/24783615.png" class="back">
</div>

CSS

Код
img {
  position: absolute;
  -webkit-animation: turn 1.7s infinite;
  animation: turn 1.7s infinite;
}
.front {
  z-index: 2;
}
@-webkit-keyframes turn {
  to {
  -webkit-transform: rotateY(360deg);
  }
}
@keyframes turn {
  to {
  transform: rotateY(360deg);
  }
}

Такой эффект больше напоминает игрушку или талисман, который ставят в машину в салон, где при ходе она начинает крутиться. Но здесь все аналогично, только вы задаете сами скорость.

Демонстрация
2019-03-21 Загрузок: 1 Просмотров: 295 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar