【CSS】CSSだけで奥行き表現をするときには「perspective」でよりリアルに。

WebGLやSVGなど、Webでの表現は様々な技術をつかって可能になってきていますが、CSSのみで実装できるtransformも忘れてはいけません。なにより手軽で、動作も軽いCSSによる表現は学んでおいて損はありません。

(※ CSSアニメーションとJSどっちが軽快か…みたいな論争もあるようですが)

transformをより効果的にみせるために、今回はperspectiveプロパティをご紹介します。

Perspectiveとは

Perspective… 遠近感・遠近法などの意味があります。

プロパティの指定方法は数値(pxやemなど)で、適応対象はブロック、インライン要素両方です。
なお、初期値はnoneとなります。

視点から要素への距離を示すため、大きいほど歪みが小さく、小さいほど歪みが大きくなります。

Screen Shot 2015-03-23 at 22.50.52
画像元:CSS Transforms Module Level 1

使ってみた

以下にサンプルを作成いたしました。

1つ目が、

perspective: 200px;

2つ目が、

perspective: 1000px;

となっています。

See the Pen PwVYxa by Tsukasa Nagata (@nt-uni) on CodePen.0

まとめ

いかがでしたか?
視点?距離?と、若干専門的な感じもしますが、色々な表現を身につけなければならないWeb屋さんとしてはこの辺りの仕組みも理解しておきたいですね。
WebGLもライブラリや書き出し機能のあるジェネレーターなどが充実している(更にしてきそう)ですが、実際に案件として応用的に活用するために、やはり物理エンジンという意味で基礎から学んでおくのがベストだと思います!

フォローして続編をチェック

@universionsをフォロー