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

HTML a CSS Manuál Ostatní vlastnosti 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.

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 */
}

 

  Aktivity (1)

Manuál pro vás napsal David Jančík [sczdavos]
Avatar
Autor je vášnivý programátor v .NET C# a PHP. Nezná slovo "nelze", nebojí se zkoušet nepoznané a pronikat do nových technologií.

Miniatura
Všechny články v sekci
Ostatní CSS vlastnosti

 

 

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