摘要：首先看下怎么做一個靜止的盒子，用到了的。判斷瀏覽器，谷歌滑輪事件當滑輪向上滾動時減小景深當滑輪向下滾動時增加景深滑輪事件好了，到這里這個盒子看起來已經(jīng)很了，你可以直接在上復制代碼查看效果，我多加了一個入場動畫，喜歡可以順手點個。

??一直想做一個立體的盒子，前段時間剛好看見掘金上有位朋友發(fā)了篇關于3d盒子的文章，看了決定自己做一下，再寫一些和盒子互動的操作。這里是要做的效果，應該要翻過墻才可以訪問，這里是github地址，可以直接查看代碼，上邊還有別的有趣的demo，這是我的博客，歡迎來訪。

??首先看下怎么做一個靜止的盒子，用到了css3的transform。將盒子六個面放在一個div里，將這個div定位好，用transform屬性改變不同的面的朝向，再將其向前移動盒子寬度的一半，盒子就做好了。html結構如下：

    

        

            
Front
            
End
            
Left
            
Right
            
Top
            
Bottom
        
    

??設置css，不熟悉transform可以看下下邊這張圖，需要注意的是元素的軸是跟著元素轉動而轉動的，所以幾個面的translateZ屬性的值都是一樣的，旋轉到正確的朝向然后向前平移盒子一半的寬度。

body,
html {
    height: 100%;
    padding: 0;
    margin: 0;
    /*將border和padding繪制在設置寬高之內(nèi)*/
    box-sizing: border-box;      
    overflow: hidden;
}
.wraper {
    width: 260px;
    height: 260px;
    margin: 128px auto;
    /*景深，可以理解為視角到3D物體的距離，設置于舞臺元素上*/
    perspective: 1000px;
}
.cube {
    height: 100%;
    width: 100%;
    position: relative;
    /*子元素繼承3D效果*/
    transform-style: preserve-3d;
    /*加上下邊這句可以體現(xiàn)出立體感*/
    /*transform: rotateX(-30deg) rotateY(-45deg);*/
}
.cube>div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .8);
    text-align: center;
    line-height: 260px;
    color: #fff;
    font-size: 48px;
    border: 2px solid #fff;
    /*設置文本內(nèi)容不可選*/
    user-select: none;
}
.front {
    /*正面不用旋轉，直接向前平移半個盒子寬*/
    transform: translateZ(130px);
}
.end {
    /*向后旋轉，以確保盒子上的文字朝向盒子外*/
    transform: rotateY(180deg) translateZ(130px);
}
.top {
    transform: rotateX(90deg) translateZ(130px);
}
.bottom {
    transform: rotateX(-90deg) translateZ(130px);
}
.left {
    transform: rotateY(-90deg) translateZ(130px);
}
.right {
    transform: rotateY(90deg) translateZ(130px);
}

??下來就是鼠標拖動盒子的核心代碼了，先理一下思路，鼠標拖動盒子，就是記錄下盒子的角度，然后點擊鼠標并拖動的時候根據(jù)鼠標移動方向和距離重新計算出盒子的旋轉角度，鼠標松開時取消監(jiān)聽，記錄盒子角度。這和我之前寫的一個例子鼠標拖動div 有點相似：

var cube = document.querySelector(".cube"),
    downX, downY, moveX, moveY, tempX, tempY, degX = 0, degY = 0;

window.onmousedown = function (e) {
    e = e || event;
    downX = e.clientX;            //獲取鼠標點下去時的坐標
    downY = e.clientY;

    window.onmousemove = function (e) {
        e = e || event;
        moveX = e.clientX - downX;            //算出鼠標移動的距離
        moveY = e.clientY - downY;
        //根據(jù)一定比例將變化反應在盒子上，改變比例5可以調(diào)節(jié)拖動的速度
        tempX = degX + moveX / 5;            
        tempY = degY - moveY / 5;
        cube.style.transform = "rotatex(" + tempY + "deg) rotatey(" + tempX + "deg)";
    };

};

window.onmouseup = function (e) {
    e = e || event;
    degX += moveX / 5;            //鼠標松開時將拖動期間改變的最終結果保存
    degY += - moveY / 5;
    window.onmousemove = null;            //取消監(jiān)聽
};

??再加一個使用滾輪改變景深的函數(shù)，因為景深太小視角會到盒子里邊，并不是很好看，所以限制了一下，在景深小于300px時將不會減小。

!function () {
    var n = 1000;
    var wraper = document.querySelector(".wraper");
    wraper.style.perspective = n + "px";
    window.onmousewheel = function (e) {
        e = e || event;
        if (e.wheelDelta) {  //判斷瀏覽器IE，谷歌滑輪事件
            if (e.wheelDelta > 0) { //當滑輪向上滾動時減小景深
                wraper.style.perspective = n - 50 + "px";
                if (n > 350) {
                    n = n - 50;
                }
            }
            if (e.wheelDelta < 0) { //當滑輪向下滾動時增加景深
                wraper.style.perspective = n + 50 + "px";
                n += 50;
            }
        } else if (e.detail) {  //Firefox滑輪事件
            if (e.detail > 0) {
                wraper.style.perspective = n - 50 + "px";
                if (n > 350) {
                    n = n - 50;
                }
            }
            if (e.detail < 0) {
                wraper.style.perspective = n + 50 + "px";
                n += 50;
            }
        }
    };
}();

??好了，到這里這個盒子看起來已經(jīng)很3D了，你可以直接在github上復制代碼查看效果，我多加了一個入場動畫，喜歡可以順手點個star。有什么建議或問題可以在博客下方留言，歡迎探討，共同學習。