ICI header("Location: http://www.mytesting.fr ");

ROTATION D'UNE FIGURE AUTOUR D'UN AXE.

par André Marini 8 Février 2015, 11:39 Images

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

commentaires

Haut de page