`Backface-visibility` - Propriété CSS

backface-visibility

Résumé des caractéristiques de la propriété `backface-visibility`

Description rapide

Visibilité de la face arrière de l'élément (pendant sa rotation).

Statut

Standard

Utilisable sur

HTML

Valeurs prédéfinies

visible | hidden

Pourcentages

Ne s'appliquent pas.

Valeur initiale

visible

Héritée par défaut

Non.

Type d'animation

Discrète : lors d'une animation, la propriété backface-visibility passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Transformations

Références (W3C)

CSS Transforms Module Level 2

Statut du document: WD (document de travail)

Schéma de la syntaxe de `backface-visibility`.

Diagramme syntaxique de backface-visibility

Schéma syntaxique de la propriété backface-visibility.
Télécharger le schéma en SVG.

Description.

La propriété backface-visibility définit si la face arrière d'un élément est affichée dans le cas où celui-ci a été tourné ou est en rotation en 3D.
Pour tourner un élément, voir la propriété CSS transform.

Valeurs pour `backface-visibility`.

backface-visibility: visible;

Valeur par défaut. La face arrière est affichée lorsque l'élément est "de dos".

Démonstration
backface-visibility: hidden;

La face arrière n'est pas affichée. L'élément semble donc disparaître lorsque il est de dos.

Démonstration
backface-visibility: initial; (visible) backface-visibility: inherit; backface-visibility: revert; backface-visibility: revertLayer; backface-visibility: unset;

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Accéder à la propriété `backface-visibility` par programme.

Avec Javascript, modifier la valeur de `backface-visibility`.

Javascript accepte deux syntaxes : la première en notation kebab-case, typique de CSS (un tiret pour séparer les mots), et la deuxième en notation en camel-case plus courante en Javascript (une majuscule pour séparer les mots).


	let el = document.getElementById('id');
	el.style['backface-visibility'] = 'hidden';
	// ou
	let el = document.getElementById('id');
	el.style.backfaceVisibility = 'hidden';

Avec Javascript, lire la valeur de `backface-visibility`.

Ce code récupère la valeur de la propriété backface-visibility lorsque celle-ci a été affectée via l'attribut style du HTML, ou par un code Javascript comme celui qui est donné plus haut. Si la propriété a été définie via un sélecteur CSS, sa valeur ne sera pas lue.


	let el = document.getElementById('id');
	let value = el.style['backface-visibility'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.backfaceVisibility;

Avec Javascript, lire la valeur calculée de `backface-visibility`.

La valeur calculée résulte de l'évaluation du mécanisme d'héritage. Cela peut être la valeur attribuée à la propriété directement sur l'élément par l'attribut style, la valeur affectée via un sélecteur CSS, une valeur héritée, ou la valeur initiale de la propriété (soit visible dans le cas de backface-visibility).


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('backface-visibility');

Avec JQuery, modifier la valeur de `backface-visibility`.

Comme c'est souvent le cas, JQuery propose une syntaxe plus courte que Javascript pour lire et écrire la valeur de backface-visibility.


 $('#id').css('backface-visibility', 'hidden');
 // ou
 $('#id').css('backfaceVisibility', 'hidden');

Avec JQuery, lire la valeur calculée de `backface-visibility`.


	let value = $('#id').css('backface-visibility');

Testez vous-même.

Vous pouvez utiliser les boutons ci-dessous pour appliquer une valeur à la propriété backface-visibility, et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Si une valeur incorrecte est appliquée, la valeur affectée sera vide, et la valeur calculée sera visible.

Exemple interactif avec la propriété `backface-visibility`.

backface-visibility :

visible

hidden

Ça tourne !

Compatibilité des navigateurs avec `backface-visibility`.

Les transformations 3D et la propriété backface-visibility sont maintenant très bien reconnues par les navigateurs actuels.

Colonne 1

Prise en charge générale des animations en 3D, incluant le support pour la gestion de la perspective et le support pour la propriété backface-visibility.

Colonne 2

Prise en charge de la propriété backface-visibility.

Remarques :

(1) Internet Explorer ne supporte pas transform-style:preserve-3d limitant ainsi l'imbrication des animations.

Transformations
3D

Propriété
backface-visibility

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `backface-visibility`.

Module CSS - Transformations - Niveau 2

En plus des transformations 2D déjà présentées dans le niveau 1 de la spécification, ce module traite des transformations en 3D. Il introduit de nouvelles propriétés pour gérer la hauteur du point de vue et la restitution des effets 3D.
Ce module introduit également les propriétés individuelles de rotation, translation et effet de zoom.

Concernant backface-visibility. Introduction de la propriété backface-visibility.

03 Mars 2020
Document de travail.

Voir aussi, concernant les transformations.

Le W3C organise les spécifications CSS en modules. Le module "Module CSS - Transformations" ou Module CSS - Transformations en anglais, regroupe toutes les définitions concernant les transformations en CSS :