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

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

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.

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

 

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