ホームページ >ウェブフロントエンド >htmlチュートリアル >Transform:rotate は携帯電話上でギザギザのソリューションを表示します_html/css_WEB-ITnose
まず互換性の説明、洗脳:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg) ); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari および Chrome */
-o-transform:rotate(7deg); /* Opera */
}
CSS3 3D 変換を使用し、GPU を介してレンダリングすると、アンチエイリアス効果を効果的に実現できます。 CSS3 変換プロパティにtranslateZ(0)を追加するだけです。例: -webkit-transform:rotate(5deg) translationZ(0);
著者はこう述べています: ただし、iPad の Safari を使用して Web ページを開くと、まだギザギザのエッジが表示されます。
互換性: GPU アクセラレーションは IE9 でのみ追加されました
私のテスト後、iPad はこの場所を最適化した新しいバージョンの Safari になるはずです
2 [巷巷] のブログより:
外層を使用する これはコンテナのoverflow:hiddenと画像のmargin:-1pxを追加することで解決できます。
この解決策はコンピューターに問題を引き起こします。
新しいソリューションのrotate3d + border:1pxソリッド透明;、問題は解決されます。
本来、画像の拡大縮小は悪いことですが、ここでの画像の拡大縮小は意図的なものです。適切なソリューションを選択して、対応するシーンで使用してください。元のソリューションは、コンピューターのブラウザーで使用することを意図したものではありません