Viditelnost pozadí - Triky CSS

backface-visibilityVlastnost se týká 3D transformací. Pomocí 3D transformací můžete otočit prvek, takže to, co si myslíme jako „přední část“ prvku, již nebude čelit obrazovce. Například by to otočilo prvek pryč od obrazovky:

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

Bude to vypadat, jako byste ho zvedli špachtlí a převrátili jako palačinku. To proto, že výchozí hodnota pro backface-visibilityje visible. Místo aby to bylo viditelné, můžete to skrýt.

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

Jednoduchý příklad:

Podívejte se na Pen FjwGA od Chrisa Coyiera (@chriscoyier) na CodePen.

To je užitečné při provádění 3D efektů. Například:

Funguje správně

Přední Zadní Zadní

Problematické v WebKit, protože viditelnost backface není skrytá

Přední Zadní Zadní

To ve Firefoxu z jakéhokoli důvodu není problematické, i když tato vlastnost funguje stejně.

Předpony

Podpora prohlížečů Firefox 10+ a IE 10+ backface-visibilitybez předpony. Opera (post Blink, 15+), Chrome, Safari, iOS a Android - to vše potřebuje -webkit-backface-visibility.

Hodnoty

Viditelné (výchozí) - prvek bude vždy viditelný, i když nebude čelit obrazovce.
skrytý - prvek není viditelný, když není obrácen k obrazovce.
inherit - vlastnost získá svoji hodnotu z nadřazeného prvku.
initial - nastaví vlastnost na výchozí, což je visible.

Více informací

3D CSS Tester
Spec
Dokumenty Mozilla

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.