backface-visibility CSS propriété

Définition de la CSS backface-visibility.

La propriété de Transformation CSS backface-visibility permet de spécifier si la face arrière d'un élément (X)HTML est cachée lorsqu'elle est orientée vers l'internaute, par exemple lors d'une rotation 3D.

Exemple de syntaxe CSS backface-visibility :

backface-visibility : visible;
backface-visibility : hidden;

La propriété de Transformation CSS backface-visibility peut prendre pour des transformations 3d, la valeur de :

hidden : la face arrière de l'élément est invisible. Active l'accélération matérielle.
visible : la face arrière de l'élément est visible. Valeur par défaut.
inherit : hérite le la valeur de son parent.

Exemple de code backface-visibility CSS

Conditions d'application de la CSS backface-visibility.

La propriété de Transformation CSS backface-visibility est applicable pour les transformations 3D.
La propriété de Transformation CSS backface-visibility n'a pas d'équivalent en HTML.

Héritage des valeurs Css de backface-visibility.

La propriété de Transformation CSS backface-visibility n'est pas hérité de son parent.

Problème d'interprétation de backface-visibility en Css.

La propriété CSS backface-visibility n'est reconnue que par Edge et Firefox 16+ et Internet Explorer 10+ (08-2017).
La valeur inherit pause des problème car elle n'est par reconnue par tous les navigateurs en particulier chrome (08-2017).

Compatibilités navigateurs de la propriété backface-visibility

Détails des versions de la CSS backface-visibility: Propriété backface-visibility est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS backface-visibility: Propriété CSS backface-visibility est compatible sous une forme préfixée à partir de Chrome 12; Propriété CSS backface-visibility est compatible sous une forme préfixée avec Firefox 10; Propriété CSS backface-visibility est compatible à partir de Firefox 16; Propriété CSS backface-visibility est compatible à partir de Internet Explorer 10; Propriété CSS backface-visibility est compatible à partir de Internet Explorer ou Edge 12; Propriété CSS backface-visibility est compatible sous une forme préfixée à partir de Opera 15; Propriété CSS backface-visibility est compatible à partir de Safari 9

Propriétés CSS préfixées de backface-visibility

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété backface-visibility CSS :

Pour augmenter la compatibilité avec les navigateurs, vous pouvez utiliser leur propre propriété de Transformation CSS pour les transformations 3D:

-webkit-transform-style pour les navigateurs de types webkit.
-webkit-transform-style pour les anciens Firefox.

Donc pour que cela soit un minimum compatible, vous devez utiliser les diverses versions de la Css backface-visibility :

Exemple d'écriture CSS multi-navigateurs de transform :

-moz-backface-visibility : hidden;
-webkit-backface-visibility : hidden;
backface-visibility : hidden;

Votre avis sur la définition backface-visibility en CSS

Votez pour la définition CSS `backface-visibility`

Votes: 5 / 5 - 1 vote
Cliquez sur une étoile pour voter.