一个非常“因吹丝听”的旋转的旋转立方体实例,我就是做出这个炫酷的效果后,果断对HTML入迷。话不多说,上最终的成型图: 立方体在页面中能够自动旋转 当我们的鼠标放到图形上时,外层的6个面会自动分离 主要知识点:1.旋转平移2.定位 3.关键帧动画 4.过度动画等 下面是过程: 1.做立方体首先,我们需要的有6个正方型面,也就是说我们需要6个正方型的图片(这个自己,随便找几张图,然后简单PS制作成宽高一样即可)下面是我所选的图片大小都为100px 首先一个页面,我们第一个要做的就是背景,代码如下: 2.然后 我们需要一个放置这个立方体的区域 用也就是参照物,我们宽高设置为200px,并且设置背景色用来区分 a.我们创建一个div标签 b.设置背景大小和背景色 3.把我们的6个图片放置到参照物里面,然后经过旋转拼合 开始旋转平移拼合成立方体