携帯電話でのtransform:rotateのギザギザ表示に対する完全な解決策

まず互換性の説明、洗脳:

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: 回転(5度) 変換Z(0);

著者は次のように述べています: ただし、iPad の Safari を使用して Web ページを開くと、依然としてギザギザのエッジが表示されます。

互換性: GPU アクセラレーションは IE9 でのみ追加されました

テスト後、iPad はギザギザしなくなりました。これは、Safari の新しいバージョンがこの場所を最適化したためです。

2. [Aoao] のブログより:

外側のコンテナの overflow:hidden を使用し、画像 margin:-1px を追加すると問題を解決できます。
この解決策はコンピュータに問題を引き起こす可能性があります。
新しいソリューションのrotate3d + border:1px Solid traditional; で問題は解決されました。
本来、画像の拡大縮小は悪いことですが、ここでの画像の拡大縮小は、適切なソリューションを選択して、対応するシーンで使用してください。

写真に対する私の現在の見解: 低品質を必要とするアイコンやロゴなどの重要でない写真には 1:1 を使用し、高品質を必要とするアバターや製品の写真には 1:1:2 を選択します。まだ大丈夫