Вашему вниманию статья на тему, как сделать эффект переворачивания 3D-карты, которая создается при помощи чистого стиля CSS. И здесь вам будет представлено несколько вариантов, основном направление идет, где по умолчанию видим изображение, то стоит только навести клик, как оно разворачивается и по другую сторону написано описание.
Также есть вариант на чистых картинках, что вы аналогично видите снимок, как только наводите, то с разворотом появляется другое изображение. Смысл заключается в том, что происходит эффект переворота, что смотрится красиво на любом тематическом сайте.
HTML
Код
<div class="geasunav-gationamemed v">
<div class="zanamugeb">
<img src="Ссылка на изображение 1"/>
</div>
<div class="derunopas"> Привет
<br>
От сайта zornet.ru
<br>
<br>
Вы посещаете отличный сайт.
<br>
дизайн сайта
</div>
</div>
<div id="secondcard" class="geasunav-gationamemed h">
<div class="zanamugeb">
<img src="Ссылка на изображение 2"/>
</div>
<div class="derunopas">
Плохое содержание
<br>
<br>
найти информацию
<br>
также
<br>
которую
<br>
навигационную схему
</div>
</div>
<div class="geasunav-gationamemed v">
<div class="zanamugeb">
<img src="Ссылка на изображение 3">
</div>
<div class="derunopas">
<img src="Ссылка на изображение 3.3">
</div> </div>
CSS
Код
.geasunav-gationamemed {
position: relative;
width: 218px;
height: 157px;
perspective: 500px;
float: left;
}
.geasunav-gationamemed.v:hover .zanamugeb, .geasunav-gationamemed.v.flip .zanamugeb{
transform: rotateX(180deg);
}
.geasunav-gationamemed.v:hover .derunopas, .geasunav-gationamemed.v.flip .derunopas{
transform: rotateX(0deg);
}
.geasunav-gationamemed.v .derunopas{
transform: rotateX(-180deg);
}
.geasunav-gationamemed.h:hover .zanamugeb, .geasunav-gationamemed.h.flip .zanamugeb{
transform: rotateY(180deg);
}
.geasunav-gationamemed.h:hover .derunopas, .geasunav-gationamemed.h.flip .derunopas{
transform: rotateY(0deg);
}
.geasunav-gationamemed.h .derunopas{
transform: rotateY(-180deg);
}
.geasunav-gationamemed .zanamugeb, .geasunav-gationamemed .derunopas {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all 0.5s ease-in;
color: #f9f2f2;
background-color: #0a0b2b;
padding: 8px;
backface-visibility: hidden;
}
.geasunav-gationamemed img
{
width:100%;
height:100%;
}
В этом материале создали кросс-браузер 3D-карту, использующую только css3.
Демонстрация
