IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

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

Posune element na dané souřadnice.

Ostatní CSS vlastnosti
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.

Ostatní CSS vlastnosti
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.

Ostatní CSS vlastnosti
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.

Ostatní CSS vlastnosti
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.

Ostatní CSS vlastnosti
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 */
}

 

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