php三D立体模拟,一款超炫3D旋转立方体动画特效

简要教程

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

使用方法

HTML结构

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

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

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

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

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

本文原创发布php中文网，转载请注明出处，感谢您的尊重！