CSS Flipping Animation

Krzysztof Furtak Bez kategorii Leave a Comment

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