前段时间在博客园看到一篇很不错的文章，就是介绍如何用CSS3来实现太阳系中行星的运动。本×××处于好奇心从头到完整的看完了。突然发现好奇不仅仅害死猫，也可以增长知识嘛（你这是什么谬论！！！）。也许有的朋友看过有关的文章那么今天我们就一起来看看怎么巧妙的利用CSS3 来实现这么漂亮的动画的吧！

我不清楚大家对于CSS3的动画了解多少，但是我对于 CSS3的东西还是限制与用什么查什么的阶段。css3的animation动画，结合transform的大小、旋转、位移、斜切，通过两三行代码，便可做出很多有趣的效果。

看不到动态图的请点击以下图片应该就可以看到了

这篇文章我很早就想分享出来了，但是你们都知道我那么懒，（懒癌晚期了已经）。 在端午节之前我就自己写好了demo，但是每次回家都玩狗，压根不去开电脑。你们肯定在想没救了这人……

废话不扯了，我和别人的写法可能不一样，下面按照我的思路给大家介绍这个动画吧。

第一、动画实现的思路

在日常写项目的时候不管是大到后台的系统管理，还是小到一个宣传的单页，我都会先拿来分析一下再去着手制作（PS: 刚上班的时候有项目来就赶紧写，从来不把整个需求看完，结果就是全部从写，所以磨刀不误砍柴工，把我的惨痛经验送给初学者们）。

下面我们一起来分析一下这个动画的思路

  • 看图片我们知道这个是一个旋转动画所以我们会用到 CSS3 transform

  • 所有行星旋转围绕的中心都是太阳，而默认的都是自己的重心但是这里我们需要都是太阳 transform-origin (这个是重点)

  • @keyframes rotation 这个就是最后一步，当布局完成我们就可以加上动画了

第二、太阳系的HTML

接下来讨论太阳系的制作，跟上面不同的地方是行星是围绕着太阳转的，而轮子是围绕着自己的圆心转的，也就是说他们转的基点不同。可以看出，transform的基点默认是本身的中心center，所以我们要改变行星的进行转换的中心点transform-origin。太阳系的html结构如下：

class为 *-mercury-track 是行星的运行轨道