Backface-zichtbaarheid - CSS-trucs

De backface-visibilityeigenschap heeft betrekking op 3D-transformaties. Met 3D-transformaties kun je erin slagen een element te roteren, zodat wat wij beschouwen als de "voorkant" van een element niet langer naar het scherm is gericht. Dit zou bijvoorbeeld een element wegdraaien van het scherm:

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

Het lijkt alsof je het met een spatel hebt opgepakt en als een pannenkoek hebt omgedraaid. Dat komt omdat de standaard voor backface-visibilityis visible. In plaats van zichtbaar te zijn, zou je het kunnen verbergen.

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

Eenvoudig voorbeeld:

Zie de Pen FjwGA door Chris Coyier (@chriscoyier) op CodePen.

Dit is handig bij het maken van 3D-effecten. Bijvoorbeeld:

Werkt naar behoren

Voorkant Achterkant

Problematisch in WebKit omdat de zichtbaarheid van de achterkant niet verborgen is

Voorkant Achterkant

Dit is om welke reden dan ook niet problematisch in Firefox, hoewel de eigenschap op dezelfde manier werkt.

Voorvoegsels

Ondersteuning voor Firefox 10+ en IE 10+ backface-visibilityzonder voorvoegsel. Opera (na Blink, 15+), Chrome, Safari, iOS en Android hebben allemaal nodig -webkit-backface-visibility.

Waarden

zichtbaar (standaard) - het element is altijd zichtbaar, zelfs als het niet naar het scherm is gericht.
verborgen - het element is niet zichtbaar wanneer het niet naar het scherm is gericht.
erven - de eigenschap krijgt zijn waarde van het bovenliggende element.
initial - stelt de eigenschap in op de standaardwaarde, namelijk visible.

Meer informatie

3D CSS-tester
Spec
Mozilla Docs

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.