问题描述

一个3D立体图形在网页中呈现旋转效果，看起来十分炫酷，这个过程的实现其实并不困难，只需要利用CSS3动画效果，并对属性设置合适的参数之后，效果就能实现了。

在解决问题之前，需要先了解CSS3的动画效果是什么，其相关属性和参数有什么含义，这个过程就请查看CSS3动画的官方文档。CSS3制作动画有三个属性：变形(transform)、转换(transition)和动画(animation)，本文将通过具体讲解几个属性的使用来对动画效果案例进行分析。

效果图：

图 2.1 立体旋转效果图

解决方案

HTML

html中只需要创建一个外部的div，来作为包裹一个立方体六面的容器，然后再在每一个div中插入图片。