CSS3 変換で Chrome と Safari のメニュー項目が回転しないのはなぜですか?

CSS3 変換の問題を理解する: 回転の課題を解決する

CSS3 の領域では、transform プロパティは要素を変換するための強力な機能を提供します。ただし、特にブラウザ間の互換性に関しては、必ずしも順風満帆というわけではありません。この記事では、CSS3 変換を使用してメニュー項目を回転するのに苦労し、Firefox では動作するのに Chrome と Safari では問題が発生する開発者が遭遇した特定の問題に対処します。

開発者は次の CSS コードを適用しました。

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

ただし、Chrome と Safari では予期した回転が観察されませんでした。

考えられる原因と解決策

HTML/CSS コード全体にアクセスできない考えられる説明の 1 つは、開発者が li a 要素の表示プロパティを block または inline-block に設定するのを怠った可能性があるということです。これらの表示値により、要素がレイアウト内のスペースを占有し、回転を受け取ることができます。

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

この調整で問題が解決しない場合は、li a ではなく li 要素に CSS3 変換ルールを適用することを検討してください。これにより、メニュー項目全体が回転され、これが望ましい動作となる可能性があります。

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

相互接続を確実にするために、コード内のベンダー プレフィックス (-webkit-、-moz-、-o-) を必ず確認してください。ブラウザの互換性。これらの提案を実装すると、このプロパティをサポートしていない IE を除くすべての主要なブラウザで CSS3 変換を使用してメニュー項目を正常に回転できるようになります。

以上がCSS3 変換で Chrome と Safari のメニュー項目が回転しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。