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 à reproduire l'effet dans Chrome et Safari. Je sais que IE ne prend pas en charge cette propriété CSS3, donc ce n'est pas un problème.

J'ai utilisé le CSS suivant:

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.

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

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

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

Dans les navigateurs Webkit (Safari et Chrome), -webkit-transform est ignoré sur les éléments en ligne. . Préparez-vous display: inline-block;à le faire fonctionner . À des fins de démonstration / test, vous pouvez également utiliser un angle négatif ou pour transformation-originéviter que le texte ne soit tourné hors de la zone visible.

_{Puisque personne n'a fait référence à la documentation pertinente:}

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

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

• un élément dont la mise en page est régie par le modèle de boîte CSS qui est un élément de niveau bloc ou atomique en ligne , ou dont la propriété d'affichage est calculée en ligne de table, groupe de lignes de table, groupe d'en-tête de table, pied de page -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, les <a>éléments sont inlinepar défaut.

Changer la displayvaleur de la propriété en inline-blockrend les éléments en tant qu'éléments atomiques de niveau en ligne , et par conséquent les éléments deviennent «transformables» 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 applicable que dans les -webkitnavigateurs basés car il semble fonctionner dans IE / FF de toute façon.

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

Selon Snook, les transformations nécessitent que les éléments affectés soient bloqués. Il a également du code pour que cela fonctionne pour IE en utilisant des filtres, si vous souhaitez l'ajouter (bien qu'il semble y avoir des limitations sur les valeurs).

-webkit-transform n'est plus nécessaire

ms supporte déjà la rotation ( -ms-transform: rotate(-10deg); )

essaye ça:

li a {
   ...

    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -sand-transform: rotate(10deg);
    display: block;
    position: fixed;
    }