NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!

perspective - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti perspective nastavujeme vzdálenost mezi osou Z a uživatelem (pouze pro 3D elementy). Vlastnost se musí nastavovat rodičovskému elementu. Aby toto fungovalo, musíme definovat podřazenému elementu vlastnost transform.

Hodnoty

  • none (výchozí) - Perspektiva se nenastavuje.
  • číslo jednotka - Číslo může být libovolné a jednotka také (tedy taková, která existuje v CSS 3 - cm, mm, px, em, ...)

Pro změnění dolních pozic 3D elementu můžeme použít vlastnost perspective-origin.

Ukázka

Vytvořme si rodičovský div s ID hlavni. Tento div má rozměry 100px × 100px, červený, plný a 1px široký rámeček, okraj elementu 50px a hodnotu 150px u vlastnosti perspective. Do něho vytvoříme další div s ID vedlejsi o stejných rozměrech se světle modrou barvou a hodnotou rotateY(40deg) u vlastnosti transform.

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <style>
                #hlavni
                {
                        width: 100px;
                        height: 100px;
                        border: 1px black solid;
                        margin: 50px;
                        perspective: 150px;
                        -webkit-perspective: 150px;         /* Chrome, Safari, Opera */
                        -moz-perspective: 150px;            /* Mozilla Firefox */
                }
                #vedlejsi
                {
                        width: 100px;
                        height: 100px;
                        background-color: #ADD8E6;
                        transform: rotateY(40deg);
                        -webkit-transform: rotateY(40deg);  /* Chrome, Safari, Opera */
                        -moz-transform: rotateY(40deg);     /* Mozilla Firefox */
                }
                </style>
                <title>perspective</title>
        </head>
        <body>
                <div id="hlavni">
                        <div id="vedlejsi">Div v rodičovském elementu, který má vlastnost perspective.</div>
                </div>
        </body>
</html>

Výsledek:

Vlastnost perspective v CSS 3 - Ostatní CSS vlastnosti

Pro pochopení této vlastnosti si ji vymažme v kódu. Výsledek bude vypadat úplně odlišně:

Bez vlastnosti perspective - Ostatní CSS vlastnosti

 

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