html怎么做成3d正方体,使用css3创建动态3d立方体(html5实践)

在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果，操作上下左右键，实现立方体的翻转效果。

下面我们开始介绍如何制作。

复制代码 代码如下:

One face

Up, down, left, right

Lorem ipsum.

New forms of navigation are fun.

Rotating 3D cube

More content

上面的html中，class为face的6个div分别代表立方体的6个面，使用one到six的class名字对他们加以区分。外部包含有id为cube和experiment的两层容器，这两层都是必须的，少了任何一个，3d效果都出不来。

其中experiment起到镜头的作用。对他设置焦距，这样3d效果才能在内部元素上展示出来。

perspective属性定义z轴平面的深度，同时也定义了平面上面和下面元素的相对尺寸。总的来说，perspective值越小，物体越大，离你也越近；perspective值越大&