このサンプルの動作確認済み環境。
| マシン | 環境 |
|---|---|
| iPhone | iPhone OS 3.1.2に付属のSafari |
| Mac | Safari 4.0.4 |
基本設定
-webkit-transform-style: preserve-3d; /* 3D表現使用する */ -webkit-perspective: 100; /* パース(遠近感)の設定 */ -webkit-transition: -webkit-transform 1s linear /* アニメーションの基本動作を設定 */
この様に記述します。個別に解説します。
「-webkit-transform-style: preserve-3d;」は3D Transformsを使いたいときに記述します。
「-webkit-perspective」はパース(遠近感)の設定。詳しくはこちらのページでスライダーを移動させてみて下さい。
「-webkit-transition: -webkit-transform 1s linear」は使用するトランジションの設定。今回は1秒間で線形にアニメーションするトランスフォームを使用。
linear以外で設定可能なアニメーションやその動作パターンはこちらのサイトで確認できます。
動作説明
既存のクラスに加えて、画像をクリックした時に以下の様な設定のクラスを追加しています。
.sampleX { -webkit-transform: rotateX(180deg); }
これにより、「rotateX(180deg);」のトランスフォームが行われ、X軸に対し、0〜180°までの回転が発生します。
サンプルはこちらで確認できます。クリックすると回転します。
(2010/01/26 追記)
回転方向の情報をまとめました。
3D回転(3D Transforms)の回転方向の説明 - 強火で進め
http://d.hatena.ne.jp/nakamura001/20100126/1264479282
