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

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