タイトル通りです。
つくったもの
いろいろ書くよりみてもらった方がはやい!
Chrome 以外のブラウザでは動作が不安定&不完全です。
IE は論外です。
GIF もペタリ・・・。
ソースコード
GitHub に置いています。
実装
CSS3 のperspective
を使ってtransform
の効果に対して奥行きを持たせています。
これにより立体的な表現が可能になります。
対応ブラウザは下記を参考にどうぞ。
transforms3d | Can an I use… Support tables for HTML5, CSS3, etc
壁など
単純にtransform
をつかって立体的に配置しています。
視点の移動
transform
のtransrate3d()
などを使い視点を移動させています。
正確には視点を動かしているのではなく壁などその他もろもろをまとめて動かしています。
そもそも CSS の視点は固定ですからね・・・。
おわりに
説明が雑いのはいつものこと。
ブラウザごとに動作にばらつきがあるので使うにはまだはやいかも。
こんな派手に移動させたりしないのなら全然ありだと思います。