Geek tričko zdarma Geek tričko zdarma
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde

2D Transforms (transformace) - Český CSS3 manuál

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Za pomocí CSS3 můžeme dané elementy libovolně natáčet, škálovat, posouvat, natahovat aj... A to za použití 2D nebo 3D transformací.

V následujícím tutoriálu si popíšeme 2D transformace.

Pro daný prohlížeč je třeba použít daný prefix:

  • IE9 -ms-
  • Firefox -moz-
  • Chrome a Safari -webkit-
  • Opera -o-

Metody pro 2D transformace

Translate()

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Posune element na dané souřadnice.

div
{
        transform: translate(50px,100px);
        -ms-transform: translate(50px,100px); /* IE 9 */
        -webkit-transform: translate(50px,100px); /* Safari and Chrome */
        -o-transform: translate(50px,100px); /* Opera */
        -moz-transform: translate(50px,100px); /* Firefox */
}

Lze použít i

transform: translateX(n);
transform: translateY(n);
transform: translateZ(n);

Rotate()

Orotuje element o daný úhel.

div
{
        transform: rotate(30deg);
        -ms-transform: rotate(30deg); /* IE 9 */
        -webkit-transform: rotate(30deg); /* Safari and Chrome */
        -o-transform: rotate(30deg); /* Opera */
        -moz-transform: rotate(30deg); /* Firefox */
}

Scale()

Roztáhne element v poměru k původním rozměrům.

div
{
        transform: scale(2,4);
        -ms-transform: scale(2,4); /* IE 9 */
        -webkit-transform: scale(2,4); /* Safari and Chrome */
        -o-transform: scale(2,4); /* Opera */
        -moz-transform: scale(2,4); /* Firefox */
}

Lze použít i

transform: scaleX(n);
transform: scaleY(n);
transform: scaleZ(n);

Skew()

Orotuje element o zadaný úhel v daných osách.

div
{
        transform: skew(30deg,20deg);
        -ms-transform: skew(30deg,20deg); /* IE 9 */
        -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
        -o-transform: skew(30deg,20deg); /* Opera */
        -moz-transform: skew(30deg,20deg); /* Firefox */
}

Lze použít i

transform: skewX(n);
transform: skewY(n);

Matrix()

Kombinuje všechny předchozí metody. Rotace, škála a posun.

div
{
        transform:matrix(0.866,0.5,-0.5,0.866,0,0);
        -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
        -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
        -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
        -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}

 

 

Manuál pro vás napsal David Jančík
Avatar
Autor je vášnivý programátor a vizionář. Nezná slovo "nelze", nebojí se zkoušet nepoznané a pronikat do nových technologií.
Všechny články v sekci
Ostatní CSS vlastnosti
Aktivity (1)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!