CSS flip a animace

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 %

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í.

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.)

Živá ukázka