- LianN a écrit:
- Je trouve déjà l'effet sympa, par contre impossible de trouver comment faire le "rotate" en décalage de l'origine. A chaque fois que je fais une rotation c'est uniquement l'image qui tourne, pas le "rond" entièrement, dommage.
Pour cela il faut utiliser la propriété
transform-origin qui te permet de définir par rapport à quel point va se faire la rotation. Par défaut, c'est le centre du cercle, d'où le rendu d'une rotation sur lui même.
Si tu décide de le faire pivoter par rapport à son coin gauche (par exemple), alors tu peux faire quelque chose comme ceci :
- Code:
-
transform-origin: left center;
La première valeur correspond à l'axe horizontal, le second à l'axe vertical. Le point d'origine de la transformation est donc au croisement de ces deux valeurs. Ici, j'utilise simplement des valeurs "pré-définies"
left et
center. Le point d'origine sera donc horizontalement à gauche de ton bloc et verticalement au centre !
Tu peux également utiliser des valeurs en % d'ailleurs.
Voici un peu de doc' qui te condense toutes les infos (+ démos) dont tu as besoin pour utiliser ceci.
Pour cette propriété il faut penser à utiliser les préfixes
-moz-,
-webkit- et ce genre de choses. Sache également que les transformations ne sont pas compatibles sous IE < 9 (soit dit en passant).
Normalement avec ceci tu devrais pouvoir réaliser l'effet de rotation. Il te faudra retirer le décalage (
left: -250px qui traine) et on devra toucher un petit peu à ta structure si tu veux pouvoir "voir" le badge tourner vu qu'il est masqué par son conteneur.
Dis moi déjà ce qu'il en est avec ces informations
Sam 30 Mar 2024, 22:07 par 
