November Black Friday C/C++ week
Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Pouze tento týden sleva až 80 % na e-learning týkající se C/C++

backface-visibility - Český CSS 3 manuál

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Pomocí CSS 3 vlastnosti backface-visibility nastavujeme viditelnost zadní strany elementu.

Hodnoty

  • visible (výchozí) - Zadní strana elementu je viditelná.
  • hidden - Zadní strana elementu je skrytá. Přesto zabírá místo na obrazovce.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Pro skrytí celého elementu můžeme použít vlastnost visibility.

Ukázka

Abychom co nejlépe viděli, co tato vlastnost dělá, vytvoříme si animaci pomocí vlastnosti animation, která bude otáčet po ose Y červený element div o rozměrech 100px × 100px (atribut transform). Tomuto elementu nastavíme vlastnost backface-visibility na hodnotu hidden.

<!DOCTYPE html>
<html>
        <head>
                <style>
                div
                {
                        width: 100px;
                        height: 100px;
                        background-color: red;

                        animation: otaceni 4s linear 0s infinite;
                        backface-visibility: hidden;

                        /* Chrome, Safari, Opera */
                        -webkit-animation: otaceni 4s linear 0s infinite;
                        -webkit-backface-visibility: hidden;

                        /* Mozilla Firefox */
                        -moz-animation: otaceni 4s linear 0s infinite;
                        -moz-backface-visibility: hidden;
                }
                @keyframes otaceni
                {
                        from { transform: rotateY(0deg); }
                        to { transform: rotateY(360deg); }
                }
                /* Chrome, Safari, Opera */
                @-webkit-keyframes otaceni
                {
                        from { -webkit-transform: rotateY(0deg); }
                        to { -webkit-transform: rotateY(360deg); }
                }
                /* Mozilla Firefox */
                @-moz-keyframes otaceni
                {
                        from { -moz-transform: rotateY(0deg); }
                        to { -moz-transform: rotateY(360deg); }
                }
                </style>
                <title>backface-visibility</title>
        </head>
        <body>
                <div>Element div</div>
        </body>
</html>

Výsledek:

Vlastnost backface-visibility v CSS 3

 

 

Manuál pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikacích v PHP (speciálně ve frameworku Laravel) a je jedním z vývojářů komunitního módu TruckersMP.
Všechny články v sekci
Ostatní CSS vlastnosti
Aktivity (1)

 

 

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