Viditeľnosť pozadia - Triky CSS

Táto backface-visibilityvlastnosť sa týka 3D transformácií. Pomocou 3D transformácií môžete riadiť otočenie prvku, takže to, čo si myslíme ako „predok“ prvku, už viac nesmeruje k obrazovke. Týmto by sa napríklad odklopil prvok z obrazovky:

.flip ( transform: rotateY(180deg); )

Bude to vyzerať, akoby ste to špáradlom zobrali a prevrátili ako placku. Je to preto, že predvolená hodnota pre backface-visibilityje visible. Namiesto viditeľnosti ho môžete skryť.

.flip ( transform: rotateY(180deg); backface-visibility: hidden; )

Jednoduchý príklad:

Prezrite si Pen FjwGA od Chrisa Coyiera (@chriscoyier) na stránkach CodePen.

To je užitočné pri vytváraní 3D efektov. Napríklad:

Funguje správne

Predné Zadné

Problematické vo WebKite, pretože viditeľnosť pozadia nie je skrytá

Predné Zadné

Vo Firefoxe to nie je z akýchkoľvek dôvodov problematické, aj keď vlastnosť funguje rovnako.

Predpony

Podpora prehliadačov Firefox 10+ a IE 10+ backface-visibilitybez predpony. Opera (post Blink, 15+), Chrome, Safari, iOS a Android - to všetko je potrebné -webkit-backface-visibility.

Hodnoty

Viditeľné (predvolené) - prvok bude vždy viditeľný, aj keď nebude otočený tvárou k obrazovke.
skrytý - prvok nie je viditeľný, ak nie je otočený k obrazovke.
inherit - vlastnosť získa svoju hodnotu z nadradeného prvku.
initial - nastaví vlastnosť na predvolené, čo je visible.

Viac informácií

3D Tester CSS
Spec
Dokumenty Mozilla

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.