Comme l'explique Christa', il y a tout d'abord une erreur sur le premier sélecteur.
La virgule permet de sélectionner plusieurs cibles différentes pour un même effet. Par coup de chance cela faisait que ça marchait par défaut, mais pas lors du passage de la souris.
En effet, une deuxième erreur s'est glissée dans le sélecteur en soit. Je suppose qu'il s'agit simplement de la div de classe .cadravatar que vous souhaitez faire pivoter. Du coup, le reste est superflu (ça faisait pas mal de classes... qui n'existent pas dans votre HTML, du moins pas sous cette forme).
Enfin, le préfixe
-moz- cible en effet le navigateur mozilla (Firefox).
Pour couvrir les autres navigateurs, il faut également faire intervenir leurs préfixes spécifiques (
-webkit- et
-o- principalement). Enfin, il faut finir par la propriété générique, sans préfixe. A terme, avec l'intégration de ces standards dans l'ensemble des navigateurs, nous n'auront plus besoin de préfixer en effet ces propriétés (votre code restera donc compatible, au passage).
Voici une version du CSS qui répond à ces critères, essayez de voir ce que ça donne :
- Code:
-
.cadravatar {
border-top:6px solid #A39627;border-right:4px solid #D7CA57;border-bottom:6px solid #E7DF98;border-left:4px solid #CFBF34;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
padding:0px;
margin-bottom:-5px;
-moz-box-shadow: 2px 2px 6px #ffffff;
-webkit-box-shadow: 2px 2px 6px #ffffff;
-o-box-shadow: 2px 2px 6px #ffffff;
box-shadow: 2px 2px 6px #ffffff;
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
opacity:1;
}
.cadravatar:hover {
-moz-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
}
Je vous laisse adapter le code si vous ne souhaitez tourner que l'image, et non le cadre (si vous avez compris ce que nous venons de vous expliquer, ça devrait aller comme sur des roulettes) =)