这是一款可互动的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中文网(m.sbmmt.com)!