マウスで動く！CSSで描く3Dオブジェクト「Photon」
PhotonはCSS/JavaScriptを使って3Dオブジェクトを描くソフトウェアです。
Web上で3Dオブジェクトを表現する試みは多数あります。最も有名なのはWebGLを使ったような高度なグラフィックスでしょうか。あのレベルまではいきませんが、シンプルな3DオブジェクトをCSSで表現するのがPhotonです。
デモです。折り鶴が再現されています。
マウスの動きで向きが変えられます。上下左右に動かせます。
こちらは地図。
マウスの動きで広げられます。
カバーフロー風の表示。マウスを動かすと前面の表示が差し代わります。
Photonでは3DオブジェクトをCSSで表現しています（その計算処理においてはJavaScriptを使っています）。そしてマウスの動きをフックして、CSSのパラメータをリアルタイムに変化させています。見た目はシンプルながら実装はかなり高度なソフトウェアです。さらに光のあたり具合による色の変化も計算されています。
PhotonはJavaScript/CSS製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
3Dという技術は必要だと思われながらも意外と手に余っている印象があります。既に幾つものWeb上で3D表示を行う技術がありましたが、どれも主流にはなりませんでした。WebGLもありますが対応ブラウザの少なさに加えてコンテンツが揃っていない印象があります。
しかしかつて動画は撮影する手間と、そのアップするのに要する時間がネックになって普及しませんでしたが動画共有サービスによって一気に広がっていきました。3Dについてもキラーコンテンツが登場すれば一気に化ける可能性はあります。そんな可能性を自分で考えてみるのも面白そうです。
via Photon - CSS 3D Lighting Engine - The Changelog - Open Source moves fast. Keep up.