css js实现3D魔方转动

要实现类似3D转动效果主要使用到CSS3的一些特性。

下面主要介绍一些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函数 }

很简单的一个小特效，有兴趣的同学自己做一个试试吧。