CSS : la propriété backface-visibility

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Résumé

La propriété CSS backface-visibility détermine si la face arrière d'un élément doit être visible ou non lorsqu'elle fait face à l'utilisateur. Lorsqu'elle est visible, la face arrière d'un élément est toujours un fond transparent et une image de la face avant est visible comme si elle était vue dans un miroir.

Il existe des cas où nous ne souhaitons pas que la face de devant soit visible au travers de la face arrière, comme lorsqu'on souhaite réaliser un effet de carte se retournant (en plaçant deux éléments dos-à-dos).

  • Valeur initiale error:(<s*codes+ids*=s*"initial-backface-visibility"[^>]*>)</s*codes+ids*=s*"initial-backface-visibility"[^>
  • S'applique à tout élément pouvant être transformé
  • Héritée non
  • Média visuel
  • Valeur calculée le mot-clef tel que spécifié; les mots-clefs initial et inherit sont remplacés par les valeurs effectives
  • Animable non
  • Ordre canonique l'unique ordre non-ambigu défini par la grammaire formelle

Syntaxe

Formal syntax:  visible | hidden 
backface-visibility: visibility

backface-visibility: visible
backface-visibility: hidden

Valeurs

visibilité
est un mot-clé indicant si la face arrière doit être visible ou non. Elle peut prendre les valeurs suivantes :
  • visible qui signifie que la face arrière est visible, permettant à la face avant d'être vue comme dans un miroir.
  • hidden qui signifie que la face arrière est invisible, cachant la face avant.

Exemples

backface-visibility: visible; backface-visibility: hidden;
1
2
3
4
5
6
1
2
3
4
5
6

Bien que non opaque, les faces avant ne
permettent pas de voir les faces arrière.

Spécifications

Spécification Statut Commentaire
CSS Transforms Level 1 Working Draft  

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 12-webkit 10 (10) -moz
16 (16)
10 Pas de support (Oui) -webkit
Fonction Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base 3.0-webkit ? 10.0 (10) -moz
16 (16)
? Pas de support (Oui) -webkit

Voir également

Étiquettes et contributeurs liés au document

Contributeurs ayant participé à cette page : tregagnon
Dernière mise à jour par : tregagnon,
Masquer la barre latérale