0

親要素にパースペクティブを設定しているときに要素で 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) で発生するようです。これを回避する方法はありますか? (元の要素のサイズを大きくしてから縮小する以外に)

4

1 に答える 1

1

GPU と非 GPU の変換に直面していると思います。何かが GPU に渡されると、渡されたもののラスター化されたコピーが取得され、ピクセルが引き伸ばされ、圧縮され、補間されます。何を GPU に渡すかを決定するのはブラウザ次第であるため、ブラウザをだまして GPU オフロード (YMMV) を行わないようにする必要があります。または、お勧めのように、大きな要素/画像を使用し、最大スケール = 1 に設定してください。

于 2012-11-14T04:22:51.953 に答える