タロタローグ ブログ

最近は位置情報サービスに興味があるので、
JavaScriptを触る必要があるなと思ってきた。
ということで、jsdo.itで色々と試している。
今回はCSSで3Dを実現する、WebKitの
「-webkit-transform」周りの機能を触る。

今回のサンプルは全部SafariなどのWebKit系ブラウザでしか動かないので注意。

しかし、jsdo.itは、JavaScriptを走らせている「jsrun.it」への
リンクを追加して欲しいな。
iPhoneで見る時はそっちの方が便利だからなぁ。
というか、jsdo.itが用意している共有機能だと、
iPhone縦向きだと見る事が出来なくて、全く話にならない。
横を向けないとボタンが出ないし、出るのはPlayボタンだけで、
Stopボタンは出てこない。

と言う事で、まずはSafariで動くように、CSSを組んでみる。
これ。
iPhoneで見るとPlayボタンが見えず、全く動かないので
リンクも貼っておく。こちらです。

3d animation using pure CSS3(marcofolio)
を見て作ってみた。

CSS3 animation test - jsdo.it - share JavaScript, HTML5 and CSS

どういう理屈でアニメーションしているのか知らないが、
とりあえずマウスオーバーすると傾いていたパネルが正面を向く。

たぶん、この部分でCSSの動きにアニメーションがついてる。

で、こっちがiPhone用に改造した方。
iPhoneからご覧の場合はこのリンクをご覧ください。

CSS3 animation test(iPhone用) - jsdo.it - share JavaScript, HTML5 and CSS

iPhoneだとhoverが動かないので、Events - iPhone(Quirks)
を参考にしつつjQueryを使って、
mouseoverとmouseoutにクラスを変更する関数を定義。
実際にiPhoneで動かしてみると、
タップしたパネルの傾きが変わって緑になるのだが、
指を離してもそのままだ。
で、もう一方のパネルをタップするとか、下にあるリンクをタップするとか、
とりあえず他にタップ可能な部分をタップすると、元に戻るようだ。
この動きは大事だな。