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

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

ありがとう。

htmlcsshtml5css3
99
shruti

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

display: blockまたはdisplay: inline-blockをli 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'