3D-переворот карточки

Карточка переворачивается на 180° по ховеру, у неё настоящая обратная сторона.

Наведите на карточки.

горы

Обратная сторона

Текст-заглушка: детали, цена, ссылка.

город

И здесь тоже

Переворот — чистый CSS, ноль скриптов.

Код

<div class="flip">
  <div class="inner">
    <div class="front"><img src="photo.jpg"></div>
    <div class="back">Обратная сторона</div>
  </div>
</div>

<style>
.flip { aspect-ratio: 3/4; perspective: 1000px; }
.inner { position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.16,1,.3,1); }
.flip:hover .inner { transform: rotateY(180deg); }
.front, .back { position: absolute; inset: 0;
  backface-visibility: hidden; border-radius: 18px; overflow: hidden; }
.back { background: #101010; color: #fff;
  transform: rotateY(180deg); }
</style>

Промпт для ИИ

Сделай 3D-переворот карточки: внешний контейнер с perspective:1000px и aspect-ratio; внутренний .inner с transform-style:preserve-3d и transition 0.7s cubic-bezier(0.16,1,0.3,1); по ховеру .inner получает rotateY(180deg). Лицевая и оборотная стороны — absolute inset:0 с backface-visibility:hidden (и -webkit-), оборотная изначально повёрнута rotateY(180deg). На таче переворачивай по клику (toggle класса).