3Д анимация CSS3: img реверс/аверс perspective + transform

5 (100%) 4 vote[s]

CSS3 имеет много полезных возможностей анимации, которые можно реализовать несколькими строчками кода без использования js, подключения объёмных библиотек. Сегодня уже в большинстве современных браузеров поддерживается анимация CSS3, что избавляет разработчиков от раздражающего использования префиксов. Одна из таких — perspective, transform-style, которые мы используем совместно с анимацией transform: rotate для получения эффекта картинки-перевёртыша аверс-реверс.

Картинка переворачивается при состоянии :active, то есть при нажатии и удерживании ЛКМ картинка перевернется, и вы увидите её «обратную» сторону:

Для начала посмотрим эффект perspective. Документация:

perspective: (как далеко объект находится от пользователя — чем ниже значение, тем выразительнее эффект);

perspective-origin: (применяется совместно со свойством perspective — с какой позиции пользователь смотрит на элемент с 3D-позиционированием — left, …)

transform-style: (preserve-3d — будет существовать в своем собственном 3D-пространстве, или flat — в той же плоскости, что и родительский элемент).

Значит, здесь нужно использовать position: absolute|relative к дочерным|родительским элементам.

В остальном — описание свойств можно посмотреть по ссылкам (они короткие, ёмкие, понятные и, главное, с кучей интересных примеров).

Посмотрим как работает transform-style: preserve-3d с поворотом по оси Y transform: rotateY(60deg):

The Goonies

Значение perspective-origin: top right — перспектива в верхнем правом углу.

<style>
.container {
perspective: 1200px;
perspective-origin: top right;
float: left;
}
.rotate {
transform-style: preserve-3d;
transform: rotateY(60deg);
}
#fill {
object-fit: fill;
}
</style>
<div class="container">
<div class="rotate">
<img id="fill" src="https://www.babulya.com.ua/wp-content/uploads/2019/04/Babulya2.jpg" alt="картинка" />
</div>
</div>

Теперь добавим блок со второй картинкой для «обратной стороны», сделаем текст поверх картинки на обратной стороне, и добавим анимацию transition: 1s.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
 width: 80vw;
 perspective: 1100px;
 perspective-origin: top right;
 margin-left: 10vw;
}
.rotate {
 transform-style: preserve-3d;
 transition: 1s;
}

.container:active .rotate {
 transform: rotateY(180deg);
}

.face {
 width: 80vw;
 position: absolute;
 backface-visibility: hidden;
 border:1px solid #a2b1ba;
 border-radius:3px;
}

.back {
 position: relative;
 transform: rotateY(180deg);
 border:1px solid #a2b1ba;
 border-radius:3px;
}

img {
 height: 100%;
 width: 100%;
 object-fit: cover;
 border:1px solid #a2b1ba;
 border-radius:3px;
 box-shadow:0 0 3px rgba(0,0,0,0.3);
}
#abs {
 position: absolute;
 width: 90%;
 height: auto;
 top:0;
 left:5%;
}
#text {
 position: absolute;
 font-size:2vw;
 font-weight:bold;
 text-shadow:0 0 3px rgba(0,0,0,0.3);
 color:#05331b;
 text-align:center;
 width: 90%;
 height: auto;
 top:50%;
}
</style>
</head>
<body>
<div class="container">
 <div class="rotate">
  <div class="face front">
    <img src="https://www.babulya.com.ua/wp-content/uploads/2019/04/777.jpg" alt="The Goonies" />
  </div>
 <div class="face back">
   <img src="https://www.babulya.com.ua/wp-content/uploads/2019/04/Babulya2.jpg" alt="The Goonies" />
   <img id="abs" src="https://www.babulya.com.ua/wp-content/uploads/2020/05/perspective.jpg" alt="The Goonies" />
   <div id="text"><p>Пример использования свойства SCC3 perspective в сочетании с transition - transform</p>
   </div>
  </div>
 </div>
</div>
</body>
</html>

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

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 255

Популярные записи