[css]画像を回転させたときのジャギ対策

WEB

2022.12.22

ジャギー？ジャギ？ガタガタするアレ。

症例

画像があったとして

<img src="https://placehold.jp/800x600.png" alt="">

これを回したとする。

img{
    transform: rotate(3deg);
}

画像の周囲にアンチエイリアスが掛かっていないような、ジャギジャギな感じになる。

そういうものだと受け入れようにもdrop-shadowをつけたりするとめっちゃ目立って、どうにかしなきゃって気持ちになってくる。

transformに追記する。

img{
    transform: rotate(3deg) translate3d(0, 0, 0);
}

これでいい感じになる。

というか、マシになる。これはこれでボケた感じがちょっとあるんだけど、やらないよりはやった方が良いって程度に落ち着く。