最近、CSSのtransformで回転させる機会が増えてきましたが、
この前ちょっとした問題が発覚しました。

画像など回転させた時は問題ないのですが、
下記のような背景パターンのバーなどを回転させるとジャギってしまいました。





どうにかならないものかと調べてみたら、
簡単に直せる方法が見つかり、
transparentの指定方法をちょっと変えるだけでOKみたいです。

▼修正例
transform: rotate(-5deg);
　↓
transform: rotate(-5deg) translate3d(0, 0, 0);

こちらを反映したのが下記になります。





translate3d は3D移動用のパラメータなのですが、
何故かこの指定でジャギるのが直るようです。

また、この指定方法はグラデーションの場合にも有効で、
下記の様になります。


【before】




【after】




こんな方法で直るなんて目から鱗でした。
最初に修正方法を見つけた人は本当すごいですね…