...
Les propriétés CSS
Exemple Cacher l'arrière d'un élément div pivoté :
Sélectionner 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é,
Sélectionner 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
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
