Cours par Webcam

Cours par Webcam

Formateur Web pour adultes depuis plus 11 ans, je vous propose des COURS collectifs par WEBCAM en LIVE pour booster vos connaissances et être autonome dans la création de site.

En savoir plus

CSS - texte

CSS - police

CSS - arrière-plan

CSS - boîte

CSS - mise en page

CSS - liste

CSS - tableau

CSS - animation

CSS - pseudo-class

CSS - pseudo-élément

CSS - les sélecteurs

Facebook
Twitter
LinkedIn

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é

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

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

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »