Heim  >  Artikel  >  Web-Frontend  >  一款超炫3D旋转立方体动画特效

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

PHP中文网
PHP中文网Original
2016-05-17 09:01:083555Durchsuche

  简要教程

  这是一款可互动的360度超炫3D旋转立方体动画特效。用户可以使用鼠标拖动立方体来查看各个面,或者通过点击左侧的导航链接页可以切换到立方体相应的面中。

  使用方法

  830.png

 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)!


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn