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

时间：2016-03-15

　　简要教程

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

　　使用方法

查看演示　下载插件

　　HTML结构

　　该3D立方体特效使用的是一个

元素作为包裹容器，然后里面使用6个子

作为立方体的6各面，另外在立方体中还有一个小的立方体，它的6个面分别贴上不同的图片。

　　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代码来控制鼠标点击立方体对的各个面时的动作，以及用户用鼠标拖动小立方体时的互动效果，和点击左侧链接导航时，旋转到相应的立方体面。

来源：http://www.htmleaf.com/css3/css3donghua/201603033176.html

上一篇：分段式基于SVG文字超酷创意动画特效 下一篇：基于纯CSS3纸飞机炫酷动画特效

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

相关文章

最新文章