web-dev-qa-db-ja.com

CSS3変換が機能しない

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

次のCSSを使用しました。

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

誰かが私が間違っている場所を提案してもらえますか?

ありがとう。

99
shruti

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

display: blockまたはdisplay: inline-blockli aに適用しましたか?そうでない場合は、試してください。

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

253
thirtydot

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

49
phihag

誰も関連ドキュメントを参照していないため:

CSS Transforms Module Level 1-Terminology-Transformable Element

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

  • block-level または atomic inline-level element であるCSSボックスモデルによってレイアウトが制御される要素、または display property である要素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に変更すると、要素は atomic inline-level elements としてレンダリングされるため、要素は定義により "transformable" になります。

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

前述のように、これは-webkitベースのブラウザでのみ適用されるようです。IE/ FFで動作するように見えるからです。

19
Josh Crozier

具体的には、リンクのみを回転させようとしていますか? LIタグ上 でうまくいくようです。

スヌークによる 変換では、影響を受ける要素がブロックである必要があります。また、フィルターを使用してIEでこれを機能させるためのコードを用意しています(値に何らかの制限があるように見えますが)。

0
Su'