利用css3动画实现的风车效果

CSS3动画样式不多，但是呢，它的每一个特性能实现的功能还是挺多的，有句话说的好，只有你想不当的，而没有你做不到的。下面呢，是本人利用CSS3中的动画来实现的风车效果。

下面是HTML样式：
用了4个div封装了一下风车的扇叶并将封装好的扇叶放入一个大的div中，最下面是风车的柄，这里给了它外面的div相对定位，这样固定风车柄时就可以直接相对于它外面的盒子设置偏移量就行了。

然后是CSS3样式：

设置了风车扇叶外面那个盒子的宽高，并用了定位将它固定到页面的中间位置。因为每片扇叶·的初始位置都是一样的，为了达到风车的效果，通过transform动画效果的旋转的方法，将它的扇叶调整成看似关于原点对称的图形（如下图）。其实风车的旋转呢，也是给它设置了旋转效果，通过给扇叶外面的div添加了一个伪类，当鼠标移至上方时触发旋转效果，