Анимация 3D-поворота

Для создания эффекта 3D-поворота разместите изображение внутри контейнера (face), который будет отвечать за переднюю часть открытки.

Этот контейнер вкладываем в другой контейнер "Карточка" card. У контейнера "Карточка" задаём стиль preserve-3d.

В той же карточке размещаем второй блок back для обратной стороны карточки.

Блок "Карточка" размещаем внутри общего контейнера.

Когда указатель мыши проходит над карточкой, то делаем поворот по оси Y на 180 градусов.

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

Мяу!

#container {
  margin: 10px;
  width: 500px;
  height: 100px;
  z-index: 1;
}

#container {
  /* perspective: 1000; */
}

#container:hover #card {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}

#card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

<div id="container">
    <div id="card">
        <div class="face">
            <img src="../images/css.jpg"/>
        </div>
		
        <div class="back face">
            <p>Обратная сторона</p>
            <p>Мяу!</p>
        </div>
    </div>
</div>

Также можете попробовать варианты rotateX и rotateZ.

Дополнительные материалы

Реклама