css3 js实现3D旋转效果

用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:指定该元素沿着X轴，Y轴或者Z轴平移的距离，可以为正值也可以为负值，单位是px；

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函数
}

如有不足之处还望指正，不胜感激。