Accueil    CSS    Propriété backface-visibility
 



style css backface-visibility  Style CSS backface-visibility

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété css backface-visibility permet de définir la visibilité de la face arrière d'un élément html. Cette propriété s'emploie spécifiquement lors de transformations (rotations) sur les éléments.

Actuellement seuls les navigateurs Chrome, Safari et Firefox implémentent leur propre version de la propriété backface-visibility :
    - Chrome et safari utilisent la propriété "-webkit-backface-visibility"
    - Firefox utilise la propriété "-moz-backface-visibility"
    - Opera n'implémente pas encore la propriété "backface-visibility"
    - Internet Explorer n'implémente pas encore la propriété "backface-visibility"



Propriétés pour le style backface-visibility :




Propriété Définition Valeurs CSS
backface-visibility Défini la la visibilité de la face arrière d'un élément hidden
visible
CSS 3

Exemple d'utilisation du style css backface-visibility :




Utilisation de la propriété backface-visibility lors d'une rotation sur l'axeY :

<style type="text/css">
.divRotation{
   border:solid 2px silver; border-radius:77px;
   background-color:lightsteelblue;
   width:150px; height:150px; line-height:150px;
   text-align:center; margin:10px 30px;
   display:inline-block;

   animation-name:rotationY; animation-duration:4s; animation-iteration-count:infinite; animation-timing-function:linear;
   -webkit-animation-name:rotationY; -webkit-animation-duration:4s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;
   -moz-animation-name:rotationY; -moz-animation-duration:4s; -moz-animation-iteration-count:infinite; -moz-animation-timing-function:linear;
   -o-animation-name:rotationY; -o-animation-duration:4s; -o-animation-iteration-count:infinite; -o-animation-timing-function:linear;
}
.backFace{
   backface-visibility:hidden;
   -webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
   -o-backface-visibility:hidden;
}

@keyframes rotationY{
   from {transform:rotateY(0deg);} to {transform:rotateY(359deg);}
}
@-webkit-keyframes rotationY{
   from {-webkit-transform:rotateY(0deg);} to {-webkit-transform:rotateY(359deg);}
}
@-moz-keyframes rotationY{
   from {-moz-transform:rotateY(0deg);} to {-moz-transform:rotateY(359deg);}
}
@-o-keyframes rotationY{
   from {-o-transform:rotateY(0deg);} to {-o-transform:rotateY(359deg);}
}
</style>

<div class="divRotation">Visible</div>

<div class="divRotation backFace">Hidden</div>


Utilisation de la propriété backface-visibility lors d'une rotation sur l'axeY :
Visible
Hidden