ROTATION D'UNE FIGURE AUTOUR D'UN AXE.

Pour faire tourner une figure autour d'un axe, on utilise le code:

<div class="divRotation"><strong>JE SUIS VISIBLE</strong></div>

Dans ce cas il faut modifier "width" et "height" jusqu'à obtenir l'encadrement parfait.

Bien entendu, on peut toujours remplacer le texte par une image en forme de médaillon circulaire.

CODE

<p>
<style type="text/css">.divRotation{
border:solid 2px silver; border-radius:77px;
background-color:yellow;
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>
</p>
<div class="divRotation"><strong>JE SUIS VISIBLE</strong></div>

RESULTAT

JE SUIS VISIBLE

Et si l'on ne veut voir que la face cachée, on utilise:

<div class="divRotation backFace"><strong>JE ME CACHE</strong></div>

CODE

<p>
<style type="text/css">.divRotation{
border:solid 2px silver; border-radius:77px;
background-color:yellow;
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>
</p>
<div class="divRotation backFace"><strong>JE ME CACHE</strong></div>

RESULTAT

JE ME CACHE

Partager cet article

commentaires