简要教程
这是一款可互动的360度超炫3d旋转立方体动画特效。用户可以使用鼠标拖动立方体来查看各个面，或者通过点击左侧的导航链接页可以切换到立方体相应的面中。
使用方法
html结构
该3d立方体特效使用的是一个
元素作为包裹容器，然后里面使用6个子
作为立方体的6各面，另外在立方体中还有一个小的立方体，它的6个面分别贴上不同的图片。
01
<p class="container">
02
<p class="inner">
03
<p class="sub front"></p>
04
<p class="sub left"></p>
05
<p class="sub right"></p>
06
<p class="sub back"></p>
07
<p class="sub top"></p>
08
<p class="sub bottom"></p>
09
10
<p class="smallcube">
11
<p class="side front"><p style="background-image:url(img/1.jpg);"></p></p>
12
<p class="side left"><p style="background-image:url(img/2.jpg);"></p></p>
13
<p class="side right"><p style="background-image:url(img/3.jpg);"></p></p>
14
<p class="side back"><p style="background-image:url(img/4.jpg);"></p></p>
15
<p class="side top"><p style="background-image:url(img/5.jpg);"></p></p>
16
<p class="side bottom"><p style="background-image:url(img/6.jpg);"></p></p>
17
</p>
18
</p>
19
</p>
css样式
包裹容器.container设置了透视效果，由于ie浏览器不支持transform-style:
preserve-3d;属性，所以无法看到3d立方体效果。
.container {
position: relative;
margin: 0 auto;
width: 100vw;
height: 100vh;
overflow: hidden;
-webkit-perspective: 750px;
perspective: 750px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
在内部容器.inner中修改透视的原点为屏幕的中心。
.container .inner {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50vw 50vw 0;
transform-origin: 50vw 50vw 0;
}
其它的样式基本上就是制作一个立方体的样式，关于使用css来制作3d立方体的详细方法可以参看：css3 3d
transforms系列教程-立方体。
javascript
该3d立方体特效中使用js代码来控制鼠标点击立方体对的各个面时的动作，以及用户用鼠标拖动小立方体时的互动效果，和点击左侧链接导航时，旋转到相应的立方体面。
以上就是一款超炫3d旋转立方体动画特效的内容。