Visibilité de la face arrière - Astuces CSS

La backface-visibilitypropriété concerne les transformations 3D. Avec les transformations 3D, vous pouvez réussir à faire pivoter un élément de sorte que ce que nous considérons comme «l'avant» d'un élément ne soit plus face à l'écran. Par exemple, cela détournerait un élément de l'écran:

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

On dirait que vous l'avez ramassé avec une spatule et que vous l'avez retourné comme une crêpe. C'est parce que la valeur par défaut backface-visibilityest visible. Au lieu d'être visible, vous pouvez le cacher.

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

Exemple simple:

Voir le Pen FjwGA de Chris Coyier (@chriscoyier) sur CodePen.

Ceci est utile lorsque vous effectuez des effets 3D. Par exemple:

Fonctionne correctement

Le dos et l'avant

Problème dans WebKit car la visibilité de la face arrière n'est pas masquée

Le dos et l'avant

Ce n'est pas problématique dans Firefox pour une raison quelconque, bien que la propriété fonctionne de la même manière.

Préfixes

Prise backface-visibilityen charge de Firefox 10+ et IE 10+ sans préfixe. Opera (post Blink, 15+), Chrome, Safari, iOS et Android ont tous besoin -webkit-backface-visibility.

Valeurs

visible (par défaut) - l'élément sera toujours visible même s'il n'est pas face à l'écran.
masqué - l'élément n'est pas visible lorsqu'il n'est pas face à l'écran.
inherit - la propriété obtient sa valeur de son élément parent.
initial - définit la propriété sur sa valeur par défaut, qui est visible.

Plus d'information

Testeur CSS 3D
Spec
Documents Mozilla

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.