Ajoute un style à un élément qui est activé
Définition et utilisation da la propriété css backface-visibility
La propriété backface-visibility détermine si la face arrière d'un élément est visible ou non pour l'utilisateur. Il s'agit d'une image miroir de la face avant qui est affichée comme face arrière d'un élément pour l'utilisateur. Elle est utile lorsqu'un élément est tourné, car elle permet de décider si la face arrière d'un élément est visible ou non.La Syntaxe CSS
backface-visibility: visible|hidden|initial|inherit;
| Valeurs par défaut | |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: |
Prise en charge de la propriété css backface-visibility dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| 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>
Valeurs de la propriété backface-visibility
visible Valeur par défaut. La face arrière est visiblehidden La face arrière n'est pas visible
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite cette propriété de son élément parent.
Club Affiliation Facile -PUB: 7JOURS -Webmarketing
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.
SITES RÉMUNÉRATEURS
Ces sites web "pépites" vous payent entre 500 et 1000 euros par mois pour effectuer de petites tâches simples !
