一款超炫3D旋转立方体动画特效

　　简要教程

　　这是一款可互动的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旋转立方体动画特效的内容，更多相关内容请关注PHP中文网（www.php.cn）！