NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
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í.

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

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

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

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

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

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

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

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

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.


 

Všechny články v sekci
Ostatní CSS vlastnosti
Článek pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
Aktivity