Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Mer 28 Mar 2012 - 13:51
coucou

Aperçu d'une rotation de 360 degrés vers la droite avec un retour initial:





le code html

Code:

<p id="Rotation_360_droite">
<a href="http://www.milouze14.com/">
<img border="0" src="http://milouze14.fr/logo_vista_64.png" /></a>
<a href="http://www.milouze14.com/">
</p>


La feuille de style:


p#Rotation_360_droite img
{
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#Rotation_360_droite img:hover
{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}




Aperçu d'une rotation de 60 degrés avec un retour initial:





Le code html:

Code:

<p id="Rotation_60_et_retour">
<a href="http://www.milouze14.com/">
<img border="0" src="http://milouze14.fr/logo_vista_64.png" /></a>
</p>
 
La feuille de style:

p#Rotation_60_et_retour img
{
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

p#Rotation_60_et_retour img:hover
{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}




Aperçu d'une rotation de 360 degrés vers la gauche:






Le code html:
Code:

<p id="Rotation_360_gauche">
<a href="http://www.milouze14.com/">
<img border="0" src="http://milouze14.fr/logo_vista_64.png" /></a>
</p>

La feuille de style:




p#Rotation_360_gauche img
{
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;

}

p#Rotation_360_gauche img:hover
{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}






Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

  
  • © PunBB | Signaler un abus