css perspectiveの適切な数値

2015.2.21

• ツイート
• 

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

• perspective - CSS | MDN

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表現が可能になっていますが、今回取り上げた遠近法など必要とされる知識も増えています。これまでの平面的なウェブデザインにとどまらないものを実現させるためにも、このような新しいプロパティも積極的に使っていきたいですね。