用css3和js實現3D旋轉的效果，主要使用到css3 transform中的一些屬性：perspective，rotate，translate。

下面主要介紹一些transform中的屬性的效果和作用：
1.transform-style:一般是塊級元素使用此屬性，使用了此屬性後的塊級元素會在保持3D效果，但是如果僅僅使用此屬性是不會看出3D特效的，必須和其他的屬性一起使用才能呈現出3D效果。
2.perspective：perspective（x px）屬性指定觀察者與Z軸的距離，單位px。這樣會有透視效果。
3.rotateX,rotateY,rotateZ:這三個屬性其實是一個，指定元素沿X軸，Y軸和Z軸旋轉的角度，型別變形的一種效果，單位是deg（角度）。
4.translateX,translateY,translateZ:

3D旋轉效果的思路：
將6張圖片分別設定transform的屬性，使之能在頁面上靜態的形成一個正方體效果，然後使用js 動態地設定包裹整個正方體的div的transform的值，這樣就實現了3D旋轉效果的。

以下是部分程式碼結構

1.html部分的div佈局

<div class="imgBox">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class
 
="left"></div>
    <div class="right"></div>
    <div class="front"></div>
    <div class="back"></div>
</div>

2.分別設定上下左右頂部和底部6個div塊的樣式

.imgBox{
    width: 200px;
    height: 200px;
    margin-top: 200px;
    margin-left: 300px;
    position: relative; 
    transform-style
 
: preserve-3d;
    transform: perspective(700px) rotateY(-60deg) rotateX(45deg);
}
.imgBox div{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 10px 10px 150px #5fbdff;
}

.top{
    background: url(image/3D_img/img1.jpg) no-repeat;
    transform: translateZ(100px);
}

.bottom{
    background: url(image/3D_img/img2.jpg) no-repeat;
    transform: translateZ(-100px);
}

.left{
    background: url(image/3D_img/img3.jpg) no-repeat;
    transform: rotateX(90deg) translateZ(-100px);
}

.right{
     background: url(image/3D_img/img4.jpg) no-repeat;
     transform: rotateX(90deg) translateZ(100px);
}

.front{
    background: url(image/3D_img/img5.jpg) no-repeat;
    transform: rotateY(90deg) translateZ(-100px);
}

.back{
    background: url(image/3D_img/img6.jpg) no-repeat;
    transform:rotateY(90deg) translateZ(100px);
}

3.js程式碼部分

window.onload=function(){
    img_box = document.querySelector('.imgBox');
    var x = 0;
    var y = 0;
    function trans(){
        x = x + 10;
        y = y + 10;
        img_box.style.transform='perspective(700px) rotateY('+x+'deg) rotateX('+y+'deg)';
    }
    setInterval(trans,500);//每隔0.5s呼叫trans函式
}

如有不足之處還望指正，不勝感激。