シンプルウェイ制作班|WEB制作スタッフブログ

transformで回転したとき、ジャギるのを直す方法

2014年09月01日

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

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





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

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

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





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

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


【before】




【after】




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

同じカテゴリー(CSS)の記事画像
世界各国のwebデザイン~バレエ団編~
GIFじゃなくてもアニメーションができる!CSS3のキーフレームを使ったコマ送りアニメーション
サイトにひと手間!CSS3アニメーション
Webフォントを使ってみませんか
英数字で途中改行するスタイル
同じカテゴリー(CSS)の記事
 世界各国のwebデザイン~バレエ団編~ (2016-03-28 15:58)
 text-shadowを使ってテキストを装飾 (2015-08-24 13:49)
 三角形の作り方 (2015-04-21 08:11)
 GIFじゃなくてもアニメーションができる!CSS3のキーフレームを使ったコマ送りアニメーション (2014-09-16 17:47)
 サイトにひと手間!CSS3アニメーション (2014-02-17 18:18)
 Webフォントを使ってみませんか (2011-09-06 16:21)
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。

コメントフォーム

名前:
メール:
URL:
コメント:
上の画像に書かれている文字を入力して下さい

<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

過去記事
最近のコメント
QRコード
QRCODE
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 27人
新規投稿

新規投稿するにはログインする必要があります。会員IDをお持ちでない方はIDを取得された後に投稿できるようになります。

このページの先頭へ