前回に引き続き、CSS３でアニメーションを試してみました。

ついでにtransformも使って3Dのアニメーションを作ってみます。

前回はanimationを使ってアニメーションを作りました。
今回はtransitionを使ってやってみようと思います。

では早速コード
の前に、簡単に説明を書いておきます
transitionは指定されたプロパティが指定された値になるまで指定した時間をかけ、変化させます。
例えば、以下のコードだとマウスオーバー、アウトでプロパティの値が変わると、
変更された値になるまで1秒かけ変化していきます。

【HTML】
スイッチ用のボタン画像と
DIVを配置し、DIVの中に動かす画像を５つ配置
※下に置いたサンプルとクラス、IDが被らないように「_」をつけています。

【CSS】
①ボタンにマウスカーソルが乗ったの時に指カーソルにする
②画像を{position:absolute;}で真ん中に表示するのでrelativeを指定
③3D用の設定。遠近感を指定(大きい程遠近感の度合いが小さくなる)
※日本語下手なのでその辺は雰囲気でｗ実際に値を変えてやってみて下さい
④真ん中にくるように指定
⑤アニメーションするプロパティ、アニメーションにかかる時間 、動き方、遅延の順に指定
※transformプロパティでアニメーションさせる、ベンダプレフィックスをつけて指定するので、ここでもベンダプレフィックスをつける
⑥変形の基準点をX軸、Y軸、Z軸の順に指定
※Z軸の値は小さい程奥に、大きい程手前にくる模様
⑦3D用の設定、preserve-3dを指定する事で奥行きを持った変形が可能
※Safariのみ

#switchBtn {
  cursor: pointer; ---①
}
.imageArea {
  position: relative; ---②
  width: 500px;
  height: 200px;
  background-color: #000;
  overflow: hidden;
  -webkit-perspective: 600; ---③
}
.imageArea img {
  position: absolute;
  top: 50px; ---④
  left: 200px; ---④
  height: 100px;
  width: 100px;
  -webkit-transition:-webkit-transform 1s ease 0; ---⑤
  -webkit-transform-origin: 50% 50% -200px; ---⑥
  -webkit-transform-style: preserve-3d; ---⑦
}

【JavaScript】
基準点を渡すと各画像を等間隔で配置する関数を作成し、
ロード完了時と、switchボタン押下時にコール
chromeでもそれっぽく見えるようにz-indexを0-200の間で指定
z-indexの値は、角度0度の時に1、角度180度の時に-1となるコサインを利用
※jQueryを使用しています。

$(function(){
  var _deg = 0; // 基準になる角度
  var _interval = 360 / $(".imageArea img").length; // 画像の配置間隔(角度)

  // 画像配置関数
  function setDeg(deg)
  {
    // imgごとに処理
    $(".imageArea img").each(function(i)
    {
      // imgを配置する角度
      var edeg = deg + i * _interval;
      // css設定
      $(this).css({
        "-webkit-transform": "rotateY(" + edeg + "deg)",
        "z-index": parseInt(Math.cos(edeg / 180 * Math.PI) * 100) + 100
      });
    });
  }

  // switchボタン押下で回転
  $("#switchBtn").bind("click",function(e)
  {
    _deg -= _interval; // 基準になる角度を移動
    setDeg(_deg); // 画像配置
  });

  // 初期配置
  setDeg(_deg);  
});

※chromeかsafariでご覧下さい
※3Dぽくなるのはsafariのみです(ipadでも確認)