CSS3変換が機能しない

メニュー項目を10度回転して変形しようとしています。CSSはFirefoxで機能しますが、ChromeとSafariで効果を再現できませんでした。IEはこのCSS3プロパティをサポートしていないので、問題ありません。

私は次のCSSを使用しました：

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

誰かが私が間違っているところを提案してくれませんか？

ありがとう。

これは、残りのHTML / CSSを見ることなく、単に知識に基づいた推測です。

あなたが適用しているdisplay: blockかdisplay: inline-blockにli a？そうでない場合は、それを試してください。

それ以外の場合は、li代わりにCSS3変換ルールを適用してみてください。

Webkitベースのブラウザー（SafariおよびChrome）では、-webkit-transform インライン要素では無視されます。。動作display: inline-block;するように設定します。デモやテストの目的でtransformation-origin、テキストが表示領域外に回転しないように、負の角度を使用することもできます。

_{誰も関連ドキュメントを参照していないので：}

CSS変換モジュールレベル1-用語-変換可能な要素

変換可能な要素は、次のいずれかのカテゴリの要素です。

• レイアウトがブロックレベルまたはアトミックインラインレベルの要素であるCSSボックスモデルによって管理されている要素、またはその表示プロパティがtable-row、table-row-group、table-header-group、table-footerとして計算される要素 -group、table-cell、またはtable-caption
• SVG名前空間の要素であり、transform、 'patternTransform'、またはgradientTransform属性を持つCSSボックスモデルによって管理されていません。

あなたの場合、<a>要素はinlineデフォルトです。

displayプロパティの値を変更inline-blockして要素をアトミックなインラインレベルの要素としてレンダリングするため、要素は定義により「変換可能」になります。

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

上記のように、-webkitIE / FFで動作するように見えるので、これはベースのブラウザーでのみ適用できるようです。

特にリンクのみを回転させようとしていますか？LIタグでそれを行うのはうまくいくようです。

Snookの変換によると、影響を受ける要素はブロックである必要があります。追加したい場合は、フィルターを使用してIEでこれを機能させるためのコードもいくつかあります（ただし、値に制限があるようです）。

-webkit-transform もう必要ありません

msは既に回転をサポートしています（-ms-transform: rotate(-10deg);）

これを試して：

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;
    }