ICI header("Location: http://www.mytesting.fr ");
TESTS ET ASTUCES DE BLOGUEUR

EFFET DE TRANSLATION ROTATIVE DONT LE NOMBRE DE TOURS EST DEFINI.

par André Marini 10 Mars 2015, 12:11 Images

EFFET DE TRANSLATION ROTATIVE DONT LE NOMBRE DE TOURS EST DEFINI.

Dans le code suivant, on peut modifier le nombre de tours, ici limité à 3.

Le texte écrit à l'intérieur que l'on peut même remplacer par une photo.

La hauteur et la longueur mais on obtiendra une figure différente.

 

Ainsi 150 X 150 donnera un cercle.

 

CODE

 

<style type="text/css">.divRonde{ 
   display:inline-block; 
   margin:20px; 
   width:250px; 
   height:250px; 
   border:solid 1px black; 
   background-color:blue; 
   border-radius:75px; 
   line-height:150px; 
   font-size:24px; 
   text-align:center; 
} 


#animCount{ 
   animation-name:rotation; -webkit-animation-name:rotation; 
   -moz-animation-name:rotation; -o-animation-name:rotation; 
   animation-duration:3s; -webkit-animation-duration:3s; 
   -moz-animation-duration:3s; -o-animation-duration:3s; 
   animation-iteration-count:3; -webkit-animation-iteration-count:3; 
   -moz-animation-iteration-count:3; -o-animation-iteration-count:3; 
   animation-timing-function:linear; -webkit-animation-timing-function:linear; 
   -moz-animation-timing-function:linear; -o-animation-timing-function:linear; 
} 
@keyframes rotation{ 
   from {transform:rotate(0deg);} to {transform:rotate(360deg);} 
} 
@-webkit-keyframes rotation{ 
   from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(360deg);} 
} 
@-moz-keyframes rotation{ 
   from {-moz-transform:rotate(0deg);} to {-moz-transform:rotate(360deg);} 
} 
@-o-keyframes rotation{ 
   from {-o-transform:rotate(0deg);} to {-o-transform:rotate(360deg);} 
}
</style>
<div class="divRonde" id="animCount"><span style="color:#FFFFFF;">Je tourne 3 fois sur moi-même</span></div>

 

RESULTAT

 

Je tourne 3 fois sur moi-même

 

RELOAD

commentaires

Haut de page

Theme: Autofocus © 2013 - Hébergé par Overblog