oujood.com

CSS3 La propriété backface-visibility


.......................

chercher |

...


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

Internet Explorer Firefox Opera Google Chrome Safari

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



Voir aussi nos tutoriel :

Organisation du texte

Comment créer le contenu de page web. • Comment rédiger des paragraphes • La façon dont fonctionnent les titres • Comment souligner certains mots de son texte • Etc......

L'Attribut dropzone

Spécifie si les données déplacées sont copiées, déplacées ou liées, alors ignorés

Balise addresse

Définit les coordonnées de l'auteur / propriétaire d'un document