Attribut BACKFACE-VISIBILITY

Rôle

L’attribut backface-visibility permet de spécifier si la face arrière d’un élément qui subit une transformation de rotation 3D doit être visible ou cachée

Survolez les blocs, l’attribut backface-visibility: hidden appliqué au bloc rose permet de cacher la face arrière lorsqu’on le retourne

L’effet Flip-Card

C’est un effet bluffant qui exploite justement cet attribut : le principe est de retourner un élément et de changer sa face, comme quand vous retournez une carte.

Dans cet exemple, le conteneur contient deux images avec l’attribut backface-visibility: hidden, l’image de devant (en couleur) est visible, l’autre (image en noir et blanc) est retournée (sur un angle de 180°) par le CSS donc invisible. On créé une animation sur le conteneur : l’image en noir et blanc (déja retournée et cachée) se retourne et donc redevient visible. Tandis que l’image en couleur au départ non retourné (donc visible) se met à disparaître lorsque le conteneur est retourné.

Vous devez préciser pour le conteneur qui contient les deux images l’attribut ci-dessous :transform-style: preserve-3dL’attribut transform-style permet de pécifier si les blocs enfants doivent subir les transformations 3D lorsque l’élément parent est lui-même transformé

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.backfaceVisibility

Compatibilité

L’attribut backface-visibility est pris en charge par tous les principaux navigateurs.
A partir d’Internet Explorer 10.
Pour implémenter cet attribut sur un ensemble de navigateur, vous devez utilisez les préfixes -ms-(Internet Explorer…), -webkit- (Chrome, Safari, Android…), -moz- (Mozilla), -o- (Opéra)

Valeurs

Les différentes valeurs de l’attribut backface-visibility sont:

visible

La face arrière de l’élément est visible : valeur par défaut
Syntaxe :
backface-visibility : visible

hidden

La face arrière de l’élément est masquée
Syntaxe :
backface-visibility : hidden

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécification.
Syntaxe :
backface-visibility : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
backface-visibility : inherit

A voir aussi

transition– transition-duration– transition-property– transition-timing-function