CSS3 変換遷移ジッター問題の解決

transform: scale(); スケーリングするとIEブラウザでジッターが発生します

変換スケーリングにより、IE ブラウザでジッターが発生します。スケーリング中に回転を追加できます。

のように：

変換: スケール(1.2);

次と置き換えます:

変換: スケール(1.2) 回転(0.1度);

transform:translate(); オフセットにより画像やテキストがぼやけます

変換オフセットにより、画像やテキストのフレームが失われ、ぼやけることもあります。この問題を解決するには、clac を使用できます。

のように：

変換: 翻訳(-50%);

次と置き換えます:

変換: translate(calc(-50% + 1px));

clac は CSS3 の計算プロパティで、スタイル内の計算に使用できます。clac の構文は、clac(number + number) です。注：這里“運算符號”兩端的空格不能少

Transform には互換性があります。IE ブラウザは IE 9 のみと互換性があります。互換性のある書き込み方法は次のとおりです。

変換:スケール(1.2)回転(0.1度);
-ms-transform:scale(1.2)rotate(0.1deg); /* IE 9 */
-moz-transform:scale(1.2)rotate(0.1deg); /* Firefox */ 
-webkit-transform:scale(1.2) rotate(0.1deg); /* Safari と Chrome */ 
-o-transform:scale(1.2)rotate(0.1deg); /* オペラ */

CSS3 トランスフォーム トランジション ジッター問題を解決する方法についての記事はこれで終わりです。CSS3 トランスフォーム トランジション ジッターの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。