WebKit用CSSの、3D機能「-webkit-transform」を試す

  • このエントリーをはてなブックマークに追加
  • 0

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

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

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

JavaScript 第5版

著者/訳者:David Flanagan

出版社:オライリー・ジャパン( 2007-08-14 )

定価:

Amazon価格:¥ 4,499

大型本 ( 704 ページ )

ISBN-10 : 4873113296

ISBN-13 : 9784873113296




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

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

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

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

  1. -webkit-transition-duration: 0.5s;

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

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

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

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

スポンサーリンク
スポンサーリンク
  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーリンク