ZorNet.Ru — сайт для вебмастера » HTML и CSS » 3D-трансформации элементов на CSS3

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

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

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

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

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

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

Установка:

HTML

Код

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

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

Демонстрация

21 Марта 2019 Загрузок: 1 Просмотров: 1164 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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