inclinaison image au survol

 

La mise à jour automatique de Firefox m'a fait revenir sur ses capacités en terme de transitions CSS3, ce que je cherchais à faire depuis un moment; or, il semblait ne pas les accepter ... jusqu'à maitenant !
Après bien des bricolages, j'espère être parvenu à faire quelque chose d'intéressant mais est-ce que ce sera bien utile ?
Survolez les cadres  et vous les verrez tourner, grandir, se déplacer, et changer d'opacité.
J'ai choisi des images pas trop lourdes à charger et j'ai un peu modifié le code indiqué pour les faire tourner dans un sens différent ... mais nous pourrons en reparler !
Le code, "brut de fonderie" de ce premier montage:
<p class="truca" style="float: left; margin: 70px 0px 0px 50px;"><img src="http://www.terragalleria.com/images/np-pacific/chis20527.jpeg" style="width: 200px; height: 150px;" /></p>
<p class="truca" style="float: left; margin: 70px 0px 0px 100px;"><img src="http://www.terragalleria.com/images/np-pacific/chis20527.jpeg" style="width: 200px; height: 150px;" /></p>
...<style type="text/css"><!--
.truca {
   opacity:.5;
           -webkit-transition: -webkit-transform 2000ms ease-out 40ms, opacity 2000ms ease-out 40ms;
  -moz-transition: -moz-transform 2000ms ease-out 40ms, opacity 2000ms ease-out 40ms;
}
.truca:hover {
   opacity: 1;
   color:#ff0000;
     -moz-transform: scale(1.5) rotate(10deg) translate(10px);
22./* WebKit */
23.-webkit-transform: scale(1.5) rotate(10deg) translate(10px);
24./* Opera */
25.-o-transform: scale(1.5) rotate(10deg) translate(10px);
26./* Standard */
27.transform: scale(1.5) rotate(10deg) translate(10px);
28.}
}
--></style>

 

 

 

Une remarque rassurante: les différents navigateurs n'acceptent pas les mêmes codes, ce qui expliquent que vous trouvez des mêmes lignes en -moz- (mozilla), en -webKit- (safari) et même en -o- (opera) ...ce qui alourdit le code général.

 

Créer un blog gratuit sur over-blog.com - Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus - Articles les plus commentés