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 */
}

1. [著者: 夢の神化]:

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ソリッド透明;、問題は解決されます。
本来、画像の拡大縮小は悪いことですが、ここでの画像の拡大縮小は意図的なものです。適切なソリューションを選択して、対応するシーンで使用してください。元のソリューションは、コンピューターのブラウザーで使用することを意図したものではありません

写真に関する私の現在の見解。 : アイコンやロゴなど、高品質を必要としない一部の重要でない画像には、1:1 を使用します。比較的高品質を必要とするアバターや製品の画像には、1:2 が適しています。