CSSで3Dっぽい部屋をつくってみた

タイトル通りです。

つくったもの

いろいろ書くよりみてもらった方がはやい!

Chrome 以外のブラウザでは動作が不安定&不完全です。

IE は論外です。

デモページ

GIF もペタリ・・・。

できたもののGIF

ソースコード

GitHub に置いています。

Koneta/css-3d-room

実装

CSS3 のperspectiveを使ってtransformの効果に対して奥行きを持たせています。

これにより立体的な表現が可能になります。

対応ブラウザは下記を参考にどうぞ。

transforms3d | Can an I use… Support tables for HTML5, CSS3, etc

壁など

単純にtransformをつかって立体的に配置しています。

視点の移動

transformtransrate3d()などを使い視点を移動させています。

正確には視点を動かしているのではなく壁などその他もろもろをまとめて動かしています。

そもそも CSS の視点は固定ですからね・・・。

おわりに

説明が雑いのはいつものこと。

ブラウザごとに動作にばらつきがあるので使うにはまだはやいかも。

こんな派手に移動させたりしないのなら全然ありだと思います。