CSS3 炫酷简单动画 详解！

在 CSS3 中动画包括 Transform、Transitions和Animations三大模块，

其中transform 对网页对象进行变形操作，transitions 实现CSS3 属性过渡变化，Animations 实现CSS3样式分步式关键帧动画演示效果。

1.定义2D变形

CSS3 的 2D 变形要通过下方函数来实现：

rotate（）：旋转对象，取值包括度（如90deg，90°）、
	   梯形（如100grad，相当于90°），
	   弧度（如1。57rad，约等于90°）
	   圈（如0.25turn，等于90°）
	    
scale（）：缩放对象包含两个数值，分别定义宽和高的缩放比例。参数值大于1为放大，小于1并大于0为缩小。

translate（）：平移对象，包含两个参数值，分别用来定义对象在x轴和y轴相对于原点的偏移距离

设计2D盒子

网页效果如下：并能进行动画翻转

代码如下：

3.定义3D变形

网页效果如下：

当指针经过时图片翻转变成如下效果：

示例代码：

4设计3D盒子

效果如图：

实例代码：

5.过渡动画

翻转菜单
网页效果如下：

当指针经过是有翻转的动画效果并变色

示例代码

6.激活动画

当鼠标经过时 按钮有光斑移动效果

示例代码：

7.焦点动画

效果如下

当选中框时背景变色

示例代码：

8.设计折叠样式动画

代码如下：

完结！

作者：在校生记录博客