Html5旋转立方体3D动态实例

一个非常“因吹丝听”的旋转的旋转立方体实例，我就是做出这个炫酷的效果后，果断对HTML入迷。话不多说，上最终的成型图：

立方体在页面中能够自动旋转

当我们的鼠标放到图形上时，外层的6个面会自动分离

 

  主要知识点：1.旋转平移2.定位 3.关键帧动画 4.过度动画等

下面是过程：

 1.做立方体首先，我们需要的有6个正方型面，也就是说我们需要6个正方型的图片（这个自己，随便找几张图，然后简单PS制作成宽高一样即可）下面是我所选的图片大小都为100px

  

首先一个页面，我们第一个要做的就是背景，代码如下：

2.然后 我们需要一个放置这个立方体的区域 用也就是参照物，我们宽高设置为200px,并且设置背景色用来区分

a.我们创建一个div标签

b.设置背景大小和背景色

3.把我们的6个图片放置到参照物里面，然后经过旋转拼合

开始旋转平移拼合成立方体