totorajの開発日記

僕がなんかメモる

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

タイトル通りです。

つくったもの

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

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

IEは論外です。

デモページ

GIFもペタリ・・・。

f:id:totorachan:20161207110352g:plain

ソースコード

GitHubに置いています。

Koneta/css-3d-room at gh-pages · totoraj930/Koneta · GitHub

実装

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

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

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

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

壁など

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

視点の移動

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

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

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

おわりに

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

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

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