web-dev-qa-db-fra.com

La transformation CSS3 ne fonctionne pas

J'essaie de transformer mes éléments de menu en les faisant pivoter de 10 degrés. Mon CSS fonctionne dans Firefox mais je n’ai pas réussi à répliquer l’effet dans Chrome et Safari. Je sais que IE ne prend pas en charge cette propriété CSS3. 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 pourrait-il s'il vous plaît suggérer où je vais mal?

Merci.

htmlcsshtml5css3
99
shruti

Ceci est simplement une supposition éclairée sans voir le reste de votre HTML/CSS:

Avez-vous appliqué display: block ou display: inline-block à li a? Sinon, essayez-le.

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

253
thirtydot

Dans les navigateurs Webkit (Safari et Chrome), -webkit-transformest ignoré sur les éléments en ligne. . Ensemble display: inline-block; à le faire fonctionner . À des fins de démonstration/test, vous pouvez également utiliser un angle négatif ou un transformation-Origin de peur que le texte ne sorte de la zone visible.

49
phihag

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

Module de transformation CSS, niveau 1 - Terminologie - Élément transformable

Un élément transformable est un élément de l'une des catégories suivantes:

  • un élément dont la présentation est régie par le modèle de boîte CSS, qui est soit niveau du bloc ou élément atomique du niveau en ligne , ou dont propriété d'affichage se calcule en une ligne de table, un groupe de lignes de table, un groupe d'en-tête de table, un groupe de pieds de page, une cellule de table ou une légende de table
  • un élément de l’espace de nom SVG non régi par le modèle de boîte CSS comportant les attributs transform, ‘patternTransform’ ou ‘gradientTransform’.

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

Changer la valeur de la propriété display en inline-block rend les éléments sous la forme éléments atomiques de niveau en ligne , et par conséquent, 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 -webkit basés sur les navigateurs puisqu'il semble fonctionner dans IE/FF indépendamment.

19
Josh Crozier

Essayez-vous spécifiquement de faire pivoter les liens uniquement? Parce que le faire sur les balises LI semble bien fonctionner.

Selon Snook les transformations nécessitent que les éléments affectés soient bloqués. Il dispose également d'un code pour que cela fonctionne pour IE en utilisant des filtres, si vous voulez bien l'ajouter (bien qu'il semble y avoir une certaine limitation des valeurs).

0
Su'