Moderní tvorba webových aplikací

O webu

CSS flip a animace

Jak v CSS otočit obsah kolem svislé nebo vodorovné osy.

4 minuty

Od IE 9 fungují v prohlížečích transformace za použití CSS vlastnosti transform. Jedním z mnoha, co tato vlastnost nabízí, je svislé a vodorovné otočení.

Pro Chrome 35, IE 9 a Safari 8 jsou nutné prefixy. Ve staré Opeře 12 otočení podle osy nefunguje (podporuje jen klasické otočení).

Zápis

.svisle-otoceni {
  transform: rotateY(20deg);
}
.vodorovne-otoceni {
  transform: rotateX(20deg);
}

Funkce rotateY a rotateX zajistí otočení kolem svislé, respektive vodorovné osy. Hodnota se zadává jako úhel. Kromě animací mají smysl hlavně hodnoty 0–180, potom nebo předtím (hodnota může být i záporná) se otočení opakuje.

Vodorovné otočení:0 deg 180 deg

Svislé otočení:0 deg 180 deg

Vodorovná osa:0 % 100 %

Svislá osa:0 % 100 %

Text

Vlastností transform-origin je možné upravit umístění osy, podle které se bude box překlápět.

Hodnotu je ideální zadávat v pixelech nebo procentech. Výchozí umístění je uprostřed (50%). Osu je možné mít i mimo element. První hodnota je posice vodorovné osy, druhá hodnota potom svislé.

element {
  transform-origin: 50% 50%; /* výchozí */
}

3D perspektiva

Zajímavěji může efekt vypadat při použití 3D perspektivy.

To funguje v Chrome, Firefoxu a nové Opeře. Čím nižší hodnota se zadá, tím je „3D efekt“ mocnější.

element {
  /* Webkit */
  -webkit-perspective: 500; 
  /* Firefox */
  -moz-transform-style: preserve-3d; 
  -moz-transform: perspective(500px);
}

Otočení jde animovat pomocí transition. V podporovaných prohlížečích se po najetí myší na „Text“ provede otočení.

Text

Samostatná ukázka

Praktické použití

Díky této transformaci jde vytvořit poměrně efektní změnu obsahu po najetí myši. (V nepodporovaných prohlížečích se změna odehraje bez animace.)

Ukázka animace

Živá ukázka

Související články

Stylování <input type=number>

Jak stylovat <input> pro zadávání čísel.

7 minut

Znázornění možnosti scrollování

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Plynulé scrollování na obsah

Jak vytvořit plynulé odrolování na určitou část stránky.

6 minut

Různá šířka <input type=number> s min/max

Proč má <input type=number> různou výchozí šířku v závislosti na min/max atributech.

3 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025