transform - Český CSS 3 manuál

HTML a CSS Manuál Ostatní vlastnosti transform - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti transform můžeme element různě transformovat (natáčet, zkosit, posouvat, natahovat atd.) a to za pomocí 2D nebo 3D transformací.

Hodnoty

  • none (výchozí) - Daný element nebude nijak transformován.
  • matrix(n, n, n, n, n, n) - Definuje 2D transformaci, používá šest hodnot.
  • matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) - Definuje 3D transformaci, používá 4×4 matici 16 hodnot (pro vytváření můžete použít tento nástroj).
  • translate(x, y) - 2D posunutí elementu.
  • translate3d(x, y, z) - 3D posunutí elementu.
  • translateX(x) - 2D posunutí elementu pouze na ose x.
  • translateY(y) - 2D posunutí elementu pouze na ose y.
  • translateZ(z) - 3D posunutí elementu pouze na ose z.
  • scale(x, y) - O kolikrát se element 2D roztáhne.
  • scale3d(x, y, z) - O kolikrát se element 3D roztáhne.
  • scaleX(x) - O kolikrát se element roztáhne na ose x.
  • scaleY(y) - O kolikrát se element roztáhne na ose y.
  • scaleZ(z) - O kolikrát se element roztáhne na 3D ose z.
  • rotate(stupně) - O kolik stupňů se element otočí.
  • rotate(x, y, z, stupně) - Definuje 3D otočení elementu.
  • rotateX(stupně) - 3D otočení elementu na ose x.
  • rotateY(stupně) - 3D otočení elementu na ose y.
  • rotateZ(stupně) - 3D otočení elementu na ose z (podobné jako vlastnost rotate()).
  • skew(x-stupně, y-stupně) - Definuje 2D zešikmení elementu pomocí stupňů.
  • skewX(stupně) - Definuje 2D zešikmení elementu pomocí stupňů na ose x.
  • skewY(stupně) - Definuje 2D zešikmení elementu pomocí stupňů na ose y.
  • perspective(n) - Definuje perspektivní pohled pro 3D transformovaný element.

Pro posunutí elementu můžeme také použít vlastnost transform-origin a jak vnořené budou v 3D prostoru elementy definuje vlastnost transform-style.

Ukázky

Pro ukázku si ukážeme pouze některé hodnoty, protože jich je opravdu hodně. Vždy si vytvoříme třídu ve stylech podle názvu hodnoty. Naše základní kostra bude vypadat nějak takto:

<!DOCTYPE html>
<html>
        <head>
                <style>
                div
                {
                        width: 200px;
                        height: 100px;
                        background-color: #ADD8E6;
                }
                </style>
                <title>transform</title>
        </head>
        <body>
                <div></div>
        </body>
</html>

matrix()

.matrix
{
        transform: matrix(0.7, 0.2, -0.8, 1, 10, 20);
        -webkit-transform: matrix(0.7, 0.2, -0.8, 1, 10, 20);   /* Chrome, Safari, Opera */
        -moz-transform: matrix(0.7, 0.2, -0.8, 1, 10, 20);      /* Mozilla Firefox */
        -ms-transform: matrix(0.7, 0.2, -0.8, 1, 10, 20);       /* IE 9 */
}

Výsledek:

Hodnota matrix vlastnosti transform v CSS 3

matrix3d()

.matrix3d
{
        transform: matrix3d(0.4, -0.16, 0, 0, 1.3, 0.737, 0, 0, 0, 0, 1, 0, 82, 92, 0, 1);
        -webkit-transform: matrix3d(0.4, -0.16, 0, 0, 1.3, 0.737, 0, 0, 0, 0, 1, 0, 82, 92, 0, 1);  /* Chrome, Safari, Opera */
        -moz-transform: matrix3d(0.4, -0.16, 0, 0, 1.3, 0.737, 0, 0, 0, 0, 1, 0, 82, 92, 0, 1);     /* Mozilla Firefox */
}

Výsledek:

Hodnota matrix3d vlastnosti transform v CSS 3

translate()

.translate
{
        transform: translate(50px, 20px);
        -webkit-transform: translate(50px, 20px);  /* Chrome, Safari, Opera */
        -moz-transform: translate(50px, 20px);     /* Mozilla Firefox */
        -ms-transform: translate(50px, 20px);      /* IE 9 */
}

Výsledek:

Hodnota translate vlastnosti transform v CSS 3

scale()

.scale
{
        transform: scale(2, 2.5);
        -webkit-transform: scale(2, 2.5);   /* Chrome, Safari, Opera */
        -moz-transform: scale(2, 2.5);      /* Mozilla Firefox */
        -ms-transform: scale(2, 2.5);       /* IE 9 */
        margin: 30%;                        /* Kvůli roztáhnutí, aby šel element vidět */
}

Výsledek:

Hodnota scale vlastnosti transform v CSS 3

rotate()

.rotate
{
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);   /* Chrome, Safari, Opera */
        -moz-transform: rotate(180deg);      /* Mozilla Firefox */
        -ms-transform: rotate(180deg);       /* IE 9 */
}

Výsledek:

Hodnota rotate vlastnosti transform v CSS 3

rotate3d()

.rotate3d
{
        transform: rotate3d(30, -30, -30, 45deg);
        -webkit-transform: rotate3d(30, -30, -30, 45deg);   /* Chrome, Safari, Opera */
        -moz-transform: rotate3d(30, -30, -30, 45deg);      /* Mozilla Firefox */
}

Výsledek:

Hodnota rotate3d vlastnosti transform v CSS 3

skew()

.skew
{
        transform: skew(10deg, 30deg);
        -webkit-transform: skew(10deg, 30deg);  /* Chrome, Safari, Opera */
        -moz-transform: skew(10deg, 30deg);     /* Mozilla Firefox */
        -ms-transform: skew(10deg, 30deg);      /* IE 9 */
        margin: 10%;                            /* Kvůli roztáhnutí, aby šel element vidět */
}

Výsledek:

Hodnota skew vlastnosti transform v CSS 3

rotateY()

.rotateY
{
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);     /* Chrome, Safari, Opera */
        -moz-transform: rotateY(180deg);        /* Mozilla Firefox */
}

Výsledek:

Hodnota rotateY vlastnosti transform v CSS 3

Poznámka

3D hodnoty podporuje IE až ve verzi 10, 2D od verze 9 kde musí být prefix -ms-. Ostatní starší prohlížeče preferují více verze s prefixem. Ty novější i tu bez prefixu.


 

  Aktivity (1)

Manuál pro vás napsal IT Man
Avatar
Autor se primárně věnuje vývoji webových stránek v PHP a v JavaScriptu (knihovna jQuery). Napsal část manuálu HTML 5 a CSS 3, kde má celkem velký přehled. Jednoduše má v oblibě weby.

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