css3利用新加的属性能实现一些高端大气的动画效果，比如css3新加动画属性：transform、transition、animation .而且不用涉及到JS代码，单纯的CSS就可以实现动画功能。
首先讲解下这几个动画属性的作用：
transform2d , transform3d
transform是变形动画，2d类的动画沿着x轴和y轴的变化，3d动画仅x值的变化使得动画在yz所形成的平面内的变化，仅y值的变化使得动画在xz所形成的平面内的变化，仅z值的变化使得动画在xy所形成的平面内的变化，如果是x,y值同时变化，则形成的是在x轴上的变化，如果是x,z值同时变化，则形成的是在y轴上的变化，如果是y,z值同时变化，则形成的是在x轴上的变化，如果是x,y,z的值都变化，则形成的是关于空间中的一点上（0,0,0）做变化。
transition:
一个在执行的过程中声明关键帧的动画，可以一旦元素的属性发生变化就可以形成一个动画，然后transition-property，transition-duration，transition-timing-function，transition-delay来设置动画的属性
animation:
通过@keyframes 来设置关键帧，在没个关键帧中设置在该帧动画中某个元素的一个或几个属性的变化。animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction来设置动画的属性
这些内容做过css动画的人都有一定的理解，已经很熟悉的小伙伴可以略过
下面就来介绍几个简单的动画效果例子。
看看效果图：
鼠标划上后效果，期间有个动画过渡效果，由于没存成gif图片，看起来有点别扭，伙伴们懂就好！！！
这里用的是css3的伪类：hover 对于有一段时间开发经验的同学来说，改为用用click事件来实现就简单多了，下面看看实现的代码：
html代码如下：
css代码如下：
该例子实现动画效果主要用到了transform和translate属性使元素旋转，达到动画过渡效果。