親要素にパースペクティブを設定しているときに要素で X または Y 回転を使用すると、変換された要素の解像度は、独自の解像度を維持するのではなく、元の要素の引き伸ばされたビットマップ バージョンに低下するように見えます。
X/Y 回転が取り除かれると、この歪みは発生しません。Z 回転は、解像度を落とさずにうまく処理されているようです。パースペクティブをオフにすると、解像度も正常に見えます。
例: http://dabblet.com/gist/4068590
/* # Bug # */
/* Removing the perspective gets rid of the resolution drop */
body { perspective: 200px; }
/*/
* X and Y rotations cause the resolution to drop
* while the Z rotation doesn't
/*/
#test {
transform: scaleX(5) scaleY(5) rotateX(2deg);
}
これは、Firefox、Chrome、および Safari (XP) で発生するようです。これを回避する方法はありますか? (元の要素のサイズを大きくしてから縮小する以外に)