OUJOOD.COM
...
Les propriétés CSS
Exemple Cacher l'arrière d'un élément div pivoté :
Exemple 📋 Copier le code
div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome et Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
}
Appui de navigateur
La propriété backface-visibility n'est prise en charge dans aucun des navigateurs principaux.
Internet Explorer 10 prend en charge une solution de rechange, la propriété –ms-backface-visibility.
Firefox prend en charge une solution de rechange, la propriété - moz-backface-visibility.
Safari et Chrome prend en charge une solution de rechange, la propriété –webkit-backface-visibility.
Remarque : La propriété -ms-backface-visibility n'est pas supportée dans Internet Explorer 9 et versions antérieures.
Définition et utilisation
La propriété backface-visibility définit si l’arrière d’un élément doit être visible ou pas quant elle est face à l'écran.
Cette propriété est utile lorsqu'un élément est tourné, et vous ne voulez pas voir ses fesses.
Pour mieux comprendre cette propriété,
Exemple 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
width:120px;
height:100px;
background-color:#ff0;
border:1px solid black;
transform:rotateY(25deg);
-webkit-transform:rotateY(25deg); /* Safari et
Chrome */
-moz-transform:rotateY(25deg); /* Firefox
*/
}
</style>
<script>
function pivoter(value)
{
document.getElementById('div1').style.webkitTransform="rotateY("
+ value + "deg)";
document.getElementById('div1').style.MozTransform="rotateY("
+ value + "deg)";
document.getElementById('div1').style.transform="rotateY("
+ value + "deg)";
document.getElementById('span1').innerHTML=value + "deg";
}
function cacherArriere()
{
if
(document.getElementById("bf").checked==true)
{
document.getElementById('div1').style.webkitBackfaceVisibility="hidden";
document.getElementById('div1').style.MozBackfaceVisibility="hidden";
}
else
{
document.getElementById('div1').style.webkitBackfaceVisibility="visible";
document.getElementById('div1').style.MozBackfaceVisibility="visible";
}
}
</script>
</head>
<body>
<div id="div1"> BONJOUR
</div>
<p>Cochez et décochez la case à cocher pour faire pivoter
l'élément div jaune, et cacher ou pas l'arrière:</p>
<p>Cacher l'arrière:<input type="checkbox"
onchange="cacherArriere()" id="bf" /></p>
Rotation:<br>
<input type="range" min="0" max="360"
value="25" onchange="pivoter(this.value)" /><br>
transform: rotateY(<span
id="span1">7deg</span>);<br>
</body>
</html>
| Valeur par défaut : | visible |
| Héritée : | non |
| Version: | CSS3 |
| Syntaxe JavaScript : | objet. style.backfaceVisibility="hidden" |
Syntaxe
backface-visibility: visible|hidden;
| Valeur | Description |
| visible | L’arrière est visible |
| hidden | L’arrière est caché |
Par carabde 10 mars 2014