问题描述
一个3D立体图形在网页中呈现旋转效果,看起来十分炫酷,这个过程的实现其实并不困难,只需要利用CSS3动画效果,并对属性设置合适的参数之后,效果就能实现了。
在解决问题之前,需要先了解CSS3的动画效果是什么,其相关属性和参数有什么含义,这个过程就请查看CSS3动画的官方文档。CSS3制作动画有三个属性:变形(transform)、转换(transition)和动画(animation),本文将通过具体讲解几个属性的使用来对动画效果案例进行分析。
效果图:
图 2.1 立体旋转效果图
解决方案
HTML
html中只需要创建一个外部的div,来作为包裹一个立方体六面的容器,然后再在每一个div中插入图片。
<div> <div> <img src="img/1.jpg&# |