En CSS3, la propriété backface-visibility joue un rôle crucial dans la manipulation d’éléments 3D. Elle permet de contrôler la visibilité de la face arrière d’un élément lorsqu’il est tourné dans l’espace, offrant ainsi un contrôle précis sur l’aspect visuel de vos animations et transitions.
La propriété backface-visibility définit si la face arrière d’un élément doit être visible ou non lorsqu’elle n’est pas tournée vers l’utilisateur. La face arrière est la face opposée à la face avant, qui est généralement celle visible par défaut.
Passez votre souris sur l’image ci-dessous :
Les différentes valeurs de la propriété backface-visibility
Cette propriété peut prendre trois valeurs :
| Valeur | Description |
|---|---|
visible |
Valeur par défaut. La face arrière est toujours visible, même lorsqu’elle n’est pas tournée vers l’utilisateur. |
hidden |
La face arrière est cachée lorsqu’elle n’est pas tournée vers l’utilisateur. Cela donne l’impression que l’élément est solide et opaque, sans aucune face visible à l’arrière. |
inherit |
L’élément hérite de la valeur de backface-visibility de son parent. |
Quand utiliser la propriété backface-visibility ?
La propriété backface-visibility est particulièrement utile dans les situations où des éléments 3D sont animés ou subissent des transformations. Par exemple, imaginez une carte à jouer qui tourne pour révéler son verso. En utilisant backface-visibility: hidden, vous pouvez masquer le verso de la carte jusqu’à ce qu’elle soit complètement tournée, créant ainsi un effet plus réaliste et immersif.
De même, backface-visibility peut être utilisée pour créer des effets de survol ou de révélation, où un élément se retourne pour afficher un contenu caché. En masquant la face arrière, vous pouvez contrôler le moment exact où le nouveau contenu est révélé, améliorant ainsi l’expérience utilisateur.
Exemple concret : Animation rotative d’une image en 3D
Dans cet exemple, l’image tourne de 180 degrés lorsqu’elle est survolée, révélant le verso. La propriété backface-visibility: hidden; masque le verso jusqu’à ce que la carte soit complètement tournée.
<div class="card">
<div class="back"></div>
</div>.card {
width: 1200px;
height: 600px;
background-image: url('image-recto.jpg');
transform-style: preserve-3d;
transition: transform 0.5s ease-in-out;
}
.card:hover {
transform: rotateY(180deg);
}
.card .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('image-verso.jpg');
transform: rotateY(180deg);
backface-visibility: hidden;
}transform-style: preserve-3d;
transform-style: Cette propriété indique comment les éléments enfants d’un élément sont affectés par les transformations 3D du parent.preserve-3d: Cette valeur indique au navigateur de traiter tous les descendants (éléments imbriqués) de l’élément comme s’ils se trouvaient dans un espace 3D. Cela signifie que lorsque vous appliquez une transformation 3D à l’élément parent, tous les éléments imbriqués seront également positionnés et affectés au sein de cet espace 3D.
Imaginez une feuille de papier plate (l’élément parent) avec une image dessinée dessus (l’élément enfant). Par défaut transform-style: inherit;, si vous inclinez la feuille (appliquer une transformation 3D), l’image s’inclinerait également mais resterait plate. Avec preserve-3d, l’image est traitée comme existant en 3D, elle semblerait donc pivoter avec la feuille, créant un effet 3D plus réaliste.
transition: transform 0.5s ease-in-out;
transition: Cette propriété spécifie un effet de transition entre différents styles d’un élément.transform: Ce mot-clé indique que la transition sera appliquée à tout changement des propriétéstransformde l’élément, ce qui peut inclure la rotation, la translation (mouvement), la mise à l’échelle et l’inclinaison.0.5s: Cette valeur définit la durée de l’animation de transition. Dans ce cas, il faudra 0,5 seconde (une demi-seconde) pour que l’animation de transformation se termine.ease-in-out: Cette fonction de timing spécifie comment l’animation progresse dans le temps.ease-in-outcommence lentement, accélère à un rythme normal au milieu, puis ralentit à nouveau vers la fin, créant une animation fluide et naturelle.
transform: rotateY(180deg);
transform: Cette propriété permet d’appliquer diverses transformations 2D et 3D à un élément, telles que la rotation, la translation, la mise à l’échelle et l’inclinaison.rotateY: Cette fonction applique spécifiquement une rotation autour de l’axe Y, qui est l’axe vertical dans l’espace 3D.(180deg): Cette valeur indique l’angle de rotation. Dans ce cas,180degsignifie que l’élément sera pivoté de 180 degrés, ce qui revient à le retourner sens dessus dessous.
backface-visibility: hidden;
backface-visibility: Cette propriété détermine si la face arrière d’un élément est visible lorsqu’elle n’est pas face à l’utilisateur.hidden: Cette valeur masque la face arrière de l’élément. Lorsque l’élément est tourné, la face arrière ne sera pas visible, donnant l’impression que l’élément est solide et opaque.
Lorsque ces deux dernières lignes sont utilisées ensemble, ces deux lignes créent l’effet de rotation d’un élément de 180 degrés et de masquage de sa face arrière. Cela peut être utile pour créer des effets 3D réalistes, comme retourner une carte ou faire pivoter un cube.
Attention : La propriété backface-visibility n’est prise en charge que par les navigateurs modernes.
