CSSで3D表現しようず！ マウスの動きで回転するレイヤーを表現

あれ、いつの間にかマークダウン形式で記事が書けるようになってる…。まあいいか。 木曜日はモック曜日として、なんか案件で使えそうなモックを作っていこうと思ってます。

前回の記事では、perspectiveについて書きましたが、 それを元にパースを付けたタグ（レイヤー）をマウスに付随して回転する演出モックを作ります。 （なんか案件で使えそうなのか微妙ですが…）

こんなん↓

今回はJavaScriptのみです。cssで3Dとか言っときながら…。 まず、IDやら、角度やら、奥行の距離の変数を作ります。

var pic = document.getElementById('pic'),
    viewport = document.getElementById('world'),
    picXAngle = 0, //レイヤーのx軸の角度
    picYAngle = 0, //レイヤーのy軸の角度
    d = 0; //奥行の距離

次にマウスが動きにあわせて、角度を算出し、 最後に回転する画像レイヤーのスタイル(Transform)を更新する関数を実行します。

window.addEventListener('mousemove', function(e){
    picYAngle = -( .5 - ( e.clientX / window.innerWidth )) * 180; // x軸の角度を算出
    picXAngle = ( .5 - ( e.clientY / window.innerHeight )) * 180; // y軸の角度を算出
    
    picXAngle = Math.ceil(picXAngle); //小数点以下を切り上げ
    picYAngle = Math.ceil(picYAngle); //小数点以下を切り上げ
    
   updateView(); // 描画する関数を呼びます。
});

次に描画する関数を作ります。 変数dは特に変化してませんが、一応値があとで変化させられるように設定してます。 あとは先ほどマウスの回転に合わせて角度の値が変化するので、 その値がcssに反映されます。

function updateView() {
    /*webkit用*/
    pic.style.webkitTransform = 'translateZ(' + d + 'px) \
        rotateX(' + picXAngle + 'deg) \
        rotateY(' + picYAngle + 'deg)';
    
    /*ff用*/
    pic.style.mozTransform = 'translateZ(' + d + 'px) \
        rotateX(' + picXAngle + 'deg) \
        rotateY(' + picYAngle + 'deg)';
    
    pic.style.transform = 'translateZ(' + d + 'px) \
        rotateX(' + picXAngle + 'deg) \
        rotateY(' + picYAngle + 'deg)';
}

これくらいなら簡単に実装できるし（IE検証してないけど）、 ちょっと驚きのある演出になるのではないでしょうか。

ソース全体は最初に貼ったjsdo.itを見てください。