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