jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2015.2.21

css perspectiveの適切な数値

Category:
CSS

css transformを使えば要素を変形させることができますが、そのままでは奥行きを出すことができません。transformを使用した要素に遠近感を持たせるには、親要素にperspectiveを指定する必要があります。

perspectiveはそのまま遠近感、遠近法という意味ですが、css上ではpxやemなどを指定します。この数値は、視点から要素への距離を指します。そのため数値が小さいほど要素は広角になり、逆に大きいほど歪みは小さくなっていきます。

perspectiveとtransform:rotateの関係性がよくわかるデモ

実際に数値を指定してどのように見えるのか、すぐわかるデモを作成しました。

See the Pen css transform rotate/perspective test by ykob (@ykob) on CodePen.

perspectiveの数値と歪みの関係を見るに、1pxギリギリから効果があり、2000pxくらいになると歪みはかなり弱くなります。4000pxあたりになるとほぼ歪みはなくなりますが、それでも指定しない状態に比べると奥行きを感じることができます。

この頃はwebGLを使わずともCSSのみで容易に3D表現が可能になっていますが、今回取り上げた遠近法など必要とされる知識も増えています。これまでの平面的なウェブデザインにとどまらないものを実現させるためにも、このような新しいプロパティも積極的に使っていきたいですね。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.