CSS Flipping Animation

Krzysiek Furtak CSS/SCSS 0 Comments

Dziś trochę zabawy z animacjami CSS. Zrobimy efekt odwracanej karty. Nie musimy do tego celu wykorzystywać ani jednej linijki JavaScript’u. Z resztą … zobacz sam 🙂

Kod HTML

[html] <div class="flip-box">
<div class="content">
<div class="front">
FRONT
</div>
<div class="back">
BACK
</div>
</div>
</div>
[/html]

Kod CSS

[css] .flip-box, .front, .back {
width: 320px;
height: 480px;
}
.flip-box {
perspective: 1000;
-webkit-perspective: 1000;

position: absolute;
top: 0;
left: 0;
}
.flip-box:hover .content,
.flip-box.hover .content {
transform: rotateY(180deg);
}
.flip-box .content {
position: relative;
transition: 500ms;
transform-style: preserve-3d;
}
.flip-box .front,
.flip-box .back {
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
.flip-box .front {
z-index: 2;
transform: rotateY(0deg);
}
.flip-box .back {
transform: rotateY(180deg);
}
[/css]

Struktura HTMLa oraz same style CSSa są bardzo proste. Najważniejsze rzeczy, na które musimy zwrócić uwagę to:

  1. Kontener zewnętrzny .flip-box zawiera perspektywę całej animacji. Dla przegląderek WEBKIT należy użyć prefiksu -webkit-perspective.
  2. Kontener .content to div, który animujemy (obracamy go 180 stopni). Animacja rozpoczyna się jeśli ktoś najedzie myszką na kontener zewnętrzny, lub doda do niego klasę .hover.
  3. Elementy o klasach .front i .back to kontenery z treścią obu stron przekręcanej karty. Są one ustawione w pozycji absolutnej „na sobie”. Kontener .front powinien posiadać większy z-index aby był wyświetlany jako pierwszy.
  4. Pamiętajmy, aby backface-visibility obu elementów z treścią był ustawiony na hidden. W ten sposób podczas animacji nie będzie wyświetlany tył elementów.
  5. Element .back powinien być obrócony o 180 stopni, żeby wyświetlił się prawidłowo.

A tutaj jest demo z bardziej szczegółowym kodem:

See the Pen yyzrzQ by Krzysztof Furtak (@KrzysiekF) on CodePen.0