La transformation CSS3 ne fonctionne pas

Question

J'essaie de transformer les éléments de mon menu en les faisant pivoter de 10 degrés. Mon CSS fonctionne dans Firefox mais je n'ai pas réussi à reproduire l'effet dans Chrome et Safari. Je sais qu'IE ne prend pas en charge cette propriété CSS3, donc ce n'est pas un problème.

J'ai utilisé les CSS suivants :

li a {
   -webkit-transform:rotate(10deg);
   -moz-transform:rotate(10deg);
   -o-transform:rotate(10deg); 
}

Quelqu'un peut-il me dire où je fais fausse route ?

Merci.

Answer 1

Il s'agit d'une simple supposition sans voir le reste de votre HTML/CSS :

Avez-vous fait une demande display: block o display: inline-block à li a ? Si non, essayez-le.

Sinon, essayez d'appliquer les règles de transformation CSS3 à li à la place.

Answer 2

Dans les navigateurs basés sur webkit (Safari et Chrome), -webkit-transform est ignorée sur les éléments en ligne. . Set display: inline-block; à faire en sorte que cela fonctionne . À des fins de démonstration/de test, vous pouvez également utiliser un angle négatif ou un transformation-origin de peur que le texte ne soit tourné en dehors de la zone visible.

Answer 3

_{Puisque personne n'a référencé la documentation pertinente :}

Module Transformations CSS Niveau 1 - Terminologie - Élément transformable

Un élément transformable est un élément appartenant à l'une de ces catégories :

• un élément dont la disposition est régie par le modèle de boîte CSS qui est soit un niveau des blocs o élément atomique de niveau inline ou dont propriété d'affichage correspond à table-row, table-row-group, table-header-group, table-footer-group, table-cell ou table-caption.
• un élément dans l'espace de noms SVG et non régi par le modèle de boîte CSS qui a les attributs transform, 'patternTransform' ou gradientTransform.

Dans votre cas, le <a> Les éléments sont inline par défaut.

Changer le display à la valeur de la propriété inline-block rend les éléments comme éléments atomiques de niveau ligne et donc les éléments deviennent "transformable" par définition.

li a {
   display: inline-block;
   -webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
   -o-transform: rotate(10deg); 
   transform: rotate(10deg);
}

Comme mentionné ci-dessus, cela ne semble s'appliquer que dans les cas suivants -webkit puisqu'il semble fonctionner dans IE/FF quoi qu'il en soit.

Answer 4

Dans mon cas, il y avait un Animation CSS exécutée sur l'élément qui avait une transformation qui remplaçait la transformation que j'ajoutais à l'élément.

Answer 5

Essayez-vous spécifiquement de faire tourner les liens uniquement ? Parce que si vous le faites sur les balises LI semble fonctionner correctement.

Selon Snook Les transformations exigent que les éléments concernés soient des blocs. Il y a également du code pour que cela fonctionne pour IE en utilisant des filtres, si vous voulez l'ajouter (bien qu'il semble y avoir une certaine limitation sur les valeurs).