Retrovisibilità - Trucchi CSS

La backface-visibilityproprietà si riferisce alle trasformazioni 3D. Con le trasformazioni 3D, puoi riuscire a ruotare un elemento in modo che ciò che pensiamo come il "fronte" di un elemento non sia più rivolto verso lo schermo. Ad esempio, questo capovolgerebbe un elemento dallo schermo:

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

Sembrerà che tu l'abbia preso con una spatola e l'avessi capovolta come una frittella. Questo perché l'impostazione predefinita per backface-visibilityè visible. Invece di essere visibile, potresti nasconderlo.

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

Esempio semplice:

Guarda la Pen FjwGA di Chris Coyier (@chriscoyier) su CodePen.

Questo è utile quando si realizzano effetti 3D. Per esempio:

Funziona correttamente

Fronte retro

Problematico in WebKit perché la visibilità della faccia posteriore non è nascosta

Fronte retro

Questo non è problematico in Firefox per qualsiasi motivo, sebbene la proprietà funzioni allo stesso modo.

Prefissi

Firefox 10+ e IE 10+ supportano backface-visibilitysenza prefisso. Opera (post Blink, 15+), Chrome, Safari, iOS e Android hanno tutti bisogno -webkit-backface-visibility.

Valori

visibile (impostazione predefinita): l'elemento sarà sempre visibile anche quando non è rivolto verso lo schermo.
nascosto : l'elemento non è visibile quando non è rivolto verso lo schermo.
inherit - la proprietà riceverà il suo valore dal suo elemento genitore.
iniziale : imposta la proprietà sul valore predefinito, ovvero visible.

Maggiori informazioni

Tester CSS 3D
Spec
Mozilla Docs

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.