Здесь вы узнаете, как сделать переворачивающийся квадрат в 3D при помощи CSS.
Переворачивающийся квадрат
Чтобы увидеть эффект, наведите курсор мышки на квадраты, расположенные ниже:
Как сделать переворачивающийся квадрат
Шаг 1) Добавляем HTML:
Пример
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Передняя сторона</h2>
</div>
<div class="flip-box-back">
<h2>Задняя сторона</h2>
</div>
</div>
</div>
Шаг 2) Добавляем CSS:
Пример
/* Контейнер переворачивающегося квадрата – ширину и высоту можно задавать любую.
Мы добавили свойство border, чтобы показать, что сам переворот идет из квадрата
при наведении курсора */
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Удалите, если вам не нужен 3D эффект */
}
/* Этот контейнер нужен, чтобы спозиционировать переднюю и заднюю сторону */
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Делаем переворот по горизонтали, когда мышь наводится на контейнер квадрата */
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
/* Позиционируем переднюю и заднюю стороны */
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Стили для передней стороны */
.flip-box-front {
background-color: #bbb;
color: black;
}
/* Стили для задней стороны */
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
Попробовать самому »Переворот по вертикали
Чтобы квадрат переворачивался по вертикали, используйте метод rotateX
вместо rotateY
:
Пример
.flip-box:hover .flip-box-inner {
transform: rotateX(180deg);
}
.flip-box-back {
transform: rotateX(180deg);
}
Попробовать самому »Внимание! Данный пример работает некорректно на мобильных устройствах.