perspective - Český CSS 3 manuál

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

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

Bez vlastnosti perspective

 

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