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