В этом уроке мы создадим кросс-браузерный 3D эффект перелистывющихся карт только с помощью CSS3. Пользователь сможет перевернуть карту и посмотреть на оборотную сторону при наведении курсора мыши. Этот пример написан на CSS3, он был протестирован на IE10, IE11, Firefox, Google Chrome и должен работать на большинстве современных браузеров. Вот пример, иллюстрирующий использование данной методики
See the Pen CSS3 3D Flipping Cards Effect by vavik (@vavik96) on CodePen.
HTML структура проста, для каждой карты имеется передняя и задняя сторона, завернутая в контейнер:
<div class=”front”>
This is the front side
</div>
<div class=”back”>
This is the back side
</div>
</div>
“DIV” с именем класса ‘flipcard “является главным контейнером, внутри него мы разместим два “DIV”, представляющие собой две стороны карты (передней и задней), эти два дива будут переворачиваться, когдакогда на главный DIV будет наведён указатель. Просто добавьте класс с именем ‘V’ или ‘H’ к главному DIV, что бы определить направление перелистывания: горизонтальное или вертикальное.
CSS код:
position: relative;
width: 220px;
height: 160px;
perspective: 500px;
}
.flipcard.v:hover .front, .flipcard.v.flip .front{
transform: rotateX(180deg);
}
.flipcard.v:hover .back, .flipcard.v.flip .back{
transform: rotateX(0deg);
}
.flipcard.v .back{
transform: rotateX(-180deg);
}
.flipcard.h:hover .front, .flipcard.h.flip .front{
transform: rotateY(180deg);
}
.flipcard.h:hover .back, .flipcard.h.flip .back{
transform: rotateY(0deg);
}
.flipcard.h .back{
transform: rotateY(-180deg);
}
.flipcard .front, .flipcard .back
{
position:absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all 0.5s ease-in;
color: white;
background-color: #000;
padding: 10px;
backface-visibility: hidden;
}