css3旋转动画八个圆

3d旋转，顾名思义就是立体旋转，涉及到三个轴向，x，y， z，2D旋转只有两个轴向，x，y关键就在z轴呢，我来解释下z轴 z轴就是物体远近，近大远小，所以会使元素看上去会变大，这个是正常的，css3 3D还有个属性就是。

4因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是borderradius50%，看一下效果5接下来就是关键的步骤了，也就是添加动画效果输入以下代码 6来看一下最后的效果，还是不错的。

我们没有使用transformorigin改变元素原点位置的情况下，CSS变形进行的旋转移位缩放等操作都是以元素自己中心变形原点位置进行变形的但很多时候需要在不同的位置对元素进行变形操作，我们就可以使用transformorigin来对。

当animate1执行完后，把这个class去掉，换成animate2其中animate1的执行时间，刚好是js定时器的时间当然这里有个问题，js定时的时间不一定会非常的吻合css的动画时间，你可以根据情况作出适当的时间调整。