Ajoute un style à un élément qui est activé
La propriété backface-visibility définit si la face arrière d'un élément doit être visible ou non lorsqu'elle fait face à l'utilisateur.
La face arrière d'un élément est une image miroir de la face avant affichée.
Cette propriété est utile lorsqu'un élément est pivoté. Elle vous permet de choisir si l'utilisateur doit voir la face arrière ou non.
backface-visibility: visible|hidden|initial|inherit;
Valeurs par défaut | |
---|---|
Inherited: | non |
Animable : | non En savoir plus sur l'animable |
Version: | CSS3 |
Syntaxe JavaScript: |
Explorateur | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
Verssion | 36 12 -webkit- | 10 | 16 10 -moz- | 4 -webkit- | 23 15 -webkit- |
Exemple 📋 Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>CSS la propriété backface-visibility</title> <style> div { position: relative; height: 190px; width: 190px; FONT-SIZE:35PX; COLOR:WHITE; text-align:center; padding:20px; background-color: #003668; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } #GEEKS { -webkit-backface-visibility: hidden; backface-visibility: hidden; } </style> </head> <body> <center> <h1 style="color:#003668;">WWW.OUJOOD.COM</h1> <h2 style="color:#003668;"> backface-visibility:visible; </h2> <div id="ouj">oujoud pour apprendre</div> </center> </body> </html>
Exemple : Modifier la visibilité de la face arrière de l'élément DIV avec JavaScript 📋 Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <html lang="fr"> <head> <meta charset="UTF-8"> <title>CSS la propriété backface-visibility</title> <style> div { width: 300px; background: #003668; color: white; animation: monAnimation 3s infinite linear alternate; } @keyframes monAnimation { to {transform: rotateY(180deg);} } </style> </head> <body> <h1>Modifier la visibilité arrière avec JavaScript</h1> <p>Modifier la visibilité arrière avec JavaScript<br> Cochez/décochez la case pour modifier la visibilité de la face arrière de l'élément DIV animé :</p> <div id="ouj"><h1>OUJOOD.COM POUR APPRENDRE</h1></div> <input type="checkbox" onclick="maFOnction(this)" checked>backface-visibility <script> function maFOnction(x) { if (x.checked === true) { document.getElementById("ouj").style.WebkitBackfaceVisibility = "visible"; // Safari document.getElementById("ouj").style.backfaceVisibility = "visible"; } else { document.getElementById("ouj").style.WebkitBackfaceVisibility = "hidden"; // Safari document.getElementById("ouj").style.backfaceVisibility = "hidden"; } } </script> </body> </html>
PROMO ! CLUB AFFILIATION FACILE : lien publicitaire affiché pendant 1 semaine sur plusieurs sites à fort trafic, partage des commissions 1TPE et SystemeIO, plus de 20000 produits.
Ces sites web "pépites" vous payent entre 500 et 1000 euros par mois pour effectuer de petites tâches simples !