backface-visibility

https://webref.ru/css/backface-visibility

by Qwerty_Wasd

HTML

<figure class="flip">
   <div class="flip-face front"><img src="//webref.ru/example/image/squirrel.jpg" alt="Белка"></div>
   <figcaption class="flip-face back">
     Вот такие белки живут в красноярских лесах —
     с серой шерсткой, любопытные и падкие на печенюшки.
   </figcaption>
  </figure>

CSS

.flip {
    position: relative; /* Относительное позиционирование */
    transform-style: preserve-3d; /* Вращение в 3D */
    width: 250px; height: 273px; /* Ширина и высота */
    transition: 1s; /* Время вращения */
   }
   .flip:hover {
    transform: rotateY(180deg); /* При наведении вращаем фото */
   }
   .flip-face {
    position: absolute; /* Абсолютное позиционирование */
    top: 0; bottom: 0; /* Задаём так равную высоту */
   }
   .flip-face.back {
    background: #4B846A; /* Цвет фона */
    font: 18px/1.6 Arial; /* Параметры шрифта */
    padding: 20px; /* Поля вокруг текста */
    color: #fff; /* Цвет текста */
    transform: rotateY(180deg); /* Вращаем по оси Y */
    backface-visibility: hidden; /* Скрываем обратную поверхность */
   }