Webは基本的に二次元です。だからそこに三次元のコンテンツがあると目を惹かれやすいのですが、作成が難しいのが問題です。そこで自分が実現したい3Dオブジェクトに合わせてライブラリを探してみるというのは良い方法かも知れません。 もしあなたがWeb上に描く立方体を探しているのであればMouseFollower.jsを使ってみると良さそうです。6面のdivを貼り合わせてマウスで操作できる立方体が作成できます。

使い方

HTMLは次のような形になります。画像も使えます。

<div class='cube'>
    <div class='face'>
        <span>1</span>
    </div>
    <div class='face'>
        <span>2</span>
    </div>
    <div class='face'>
        <span>3</span>
    </div>
    <div class='face'>
        <span>4</span>
    </div>
    <div class='face'>
        <span>5</span>
    </div>
    <div class='face'>
        <span>6</span>
    </div>
</div>

ついでスタイルシート。

$size-cube: 200px;
*,*:before,*:after{margin: 0;padding: 0;box-sizing:border-box;}
.cube{
    position: relative;  
    width: $size-cube;
    height: $size-cube;
    margin: 7em auto;
    border:1px solid lightgrey;
    transform-style: preserve-3d;
    transform-origin:center center;
}

.face{
    position:absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
    opacity: .7;  
    text-align: center;
    line-height: $size-cube;
    span{
        font-size: 7em;
    }
}
.face:nth-child(2){transform: rotateX(-90deg) translateZ(-$size-cube/2) translateY($size-cube/2);}
.face:nth-child(3){transform: rotateX(-90deg) translateZ($size-cube/2) translateY($size-cube/2);}
.face:nth-child(4){transform: rotateY(-90deg) translateZ($size-cube/2) translateX(-$size-cube/2);}
.face:nth-child(5){transform: rotateY(-90deg) translateZ(-$size-cube/2) translateX(-$size-cube/2);}
.face:nth-child(6){transform: rotateY(180deg) translateZ($size-cube);}

1面ごとにtransformを使って回転させることで向きを変えています。1面が正面、後は上下左右に貼付けられています。6面は真後ろになりますので表示できないようです。

最後にJavaScriptです。

MouseFollower = (function(){
    var store = [],         //contains an object with an element & invert property
        xdeg = ydeg = 0,    //the current rotationAngles of the cube that is currently being handled
        sPos = {},          //relative pos on screen, seen from the document
        invert = 1;         //look to the mouse cursor or away from it

    document.body.onmousemove = followElements;
    function prefixStyle(el,p,style){
        var prefixes = ["webkit","moz","o",""],
                i = 0;
        p = p.charAt(0).toUpperCase() + p.slice(1);
        [].forEach.call(prefixes, function(prefix){
            if( prefix == ""){
                p = p.charAt(0).toLowerCase() + p.slice(1);
                el.style[prefix + p] = style;   
            }else{
                el.style[prefix + p] = style;   
            }

        });
    }
    function posOnScreen(el){
        return el.getBoundingClientRect();
    }
    function followElements( e ){
        [].forEach.call( store , function(item, index){
            sPos = posOnScreen( item.element );
            /* if the element is in the viewport */
            if( sPos.top > -sPos.height || sPos.top < document.documentElement.clientHeight + sPos.height){
                invert = item.invert ? -1 : 1;

                xdeg = -90 * invert * ( e.clientX - sPos.left ) / document.documentElement.clientWidth + "deg";
                ydeg = 90 * invert * ( e.clientY - sPos.top ) / document.documentElement.clientHeight + "deg";
                prefixStyle(item.element,"transform","rotateY("+xdeg+") rotateX("+ydeg+")");
            }else{
            }
        });
    }
    function add( opt ){
        if( opt && opt.element ){
            store.push( opt );
        }
    }
    function remove(arguments) {
    }
    function stop() {
        store = [];
    }

    return {
        add: add,
        remove: remove,
        stop: stop
    }
})();

後は実際の利用するDOMに対して実行します。

MouseFollower.add({
    element: document.querySelector('.follow-mouse')
    //,invert: true /* invert if you want it to look away from the mouse cursor */
});

マウスの動きに追従して立方体が動くので、より立体感が得られるはずです。HTML/スタイルシート/JavaScriptともそれぞれシンプルに実装されているので応用もしやすいのではないでしょうか。 MouseFollower.jsはHTML/CSS3/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 MouseFollower.js – Christian Fei – Web Developer