ブログ

CSS Transformsの4つのTips

ある案件とかある案件とかある案件とか(笑)でCSS Transformsを実装してみました。ついでに、このサイトを更新したときにもCSS 3D Transformsを実装しています。そこで得られた5つのTipsを備忘録を兼ねて書いてみようと思います。そこで得られた5つのTipsを備忘録を兼ねて書いてみようと思います。

要素を傾けたらリンクをクリックしにくいときの対処法

transform:rotate() などでa要素やlabel要素を傾けると、リンクがクリックしにくくなります。傾けた要素の子要素にa要素やlabel要素があっても同じです。

クリックしても反応しない部分が出てきます。

対処方法は、親要素にa要素やlabel要素を配置し、その子要素のみを傾けるか、要素がマウスオーバーしたときに要素の傾きを解消することです。

要素がマウスオーバーしたときに要素の傾きを解消することで、インタラクティブな演出もできます。

絶対配置・固定配置した別の要素と重なるときの対処法

モーダルウインドウなど、絶対配置・固定配置した要素を、CSS 3D Transformを指定した要素の上に配置したときに、CSS 3D Transformを指定した要素が、絶対配置・固定配置した要素を突き抜けて見えてしまいます。z-indexを指定しようが関係ありません。

これに実にはまって試行錯誤したのですが、対処方法があります。

CSS 3D Transformを指定した要素の親要素に「overflow:hidden」を指定します。これで、CSS 3D Transformを指定した要素が絶対配置・固定配置した要素を突き抜けて見えてしまう問題を解消できます。

CSS 3D Transformを指定した要素が固定配置されないときの対処法

CSS 3D Transformsのなかでも、transform:rotateX() / rotateY() を指定した要素は、固定配置されされません。

このようなときには、固定配置したい要素から transform:rotateX() / rotateY()の指定を外します。要素を移動するだけなら問題ありません。

transform:scale() で要素を拡大すると文字が汚くなるときの対処法

transform:scale() で要素を拡大すると、文字にジャギーが発生したり、文字がぼけたりします。

このようなときには、transform:scale() で拡大した最大値を transform:scale(1, 1) にすることにして、それを前提にしてコンテンツを作成します。

まとめ

案件とは別にどこかのサンプルを勉強用に実装してみたけど、CSS 3D Transformsは難しいです。CSS 2D Transformの何倍も。

しかし、CSS3のサポートがいいスマートフォンがターゲットのサイトを中心にCSS 3D Transformを使った演出とかがこれから増えていくでしょう。ちなみに、Android 2.3でもサポートはできています。

いまから勉強しておいて損はないですよ。本当はもう一つTipsがあるのですが、それは長くなってしまったので別記事ということで。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。