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):
Значение 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 — хорошее оригинальное решение для подсказок, дополнительной информации, особенно если страница уже перегружена элементами и вставить какие-либо элементы уже крайне сложно.
Читайте больше по теме:
