译：css3 太阳系模拟
原文：CSS3 模拟我们的太阳系 by Alex Girón
日期：2010年5月18日
利用 CSS3 的圆角、变换和动画功能绘制太阳系。效果非常惊人有趣。
我研究了几个月的 CSS3，了解其新功能，并体验了各浏览器的支持程度。几周前我放出了第一个实验，是关于 @font-face 和变换功能的。这次呢，我进行的圆角矩形实验，原以为会有些无聊，结果非常有意思。
主流浏览器中的太阳系
主流浏览器中的太阳系
亲自体验下，我只用了 CSS 和 HTML 就完成了太阳系的简单模拟。
要获得最佳体验请使用 Safari 浏览，chrome 中动画有点卡。
细节
轨道和行星都是通过 border-radius 生成的，而动画是通过 –webkit animation 动画属性和变换功能实现的。以下是所用代码的示例：
圆角边框
ul.solarsystem li.sun {
width: 40px;
height: 40px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
动画 与变换
ul.solarsystem li {
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:orbit;
}
ul.solarsystem li.earth span {
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:moon;
}
ul.solarsystem li.mercury {-webkit-animation-duration:5s;}
ul.solarsystem li.venus {-webkit-animation-duration:8s;}
ul.solarsystem li.earth {-webkit-animation-duration:12s;}
ul.solarsystem li.earth span {-webkit-animation-duration:2s;}
ul.solarsystem li.mars {-webkit-animation-duration:20s;}
ul.solarsystem li.asteroids_meteorids {-webkit-animation-duration:50s;}
ul.solarsystem li.jupiter {-webkit-animation-duration:30s;}
ul.solarsystem li.saturn {-webkit-animation-duration:60s;}
ul.solarsystem li.uranus {-webkit-animation-duration:70s;}
ul.solarsystem li.neptune {-webkit-animation-duration:100s;}
ul.solarsystem li.pluto {-webkit-animation-duration:120s;}
@-webkit-keyframes orbit {
from { -webkit-transform:rotate(0deg) }
to { -webkit-transform:rotate(360deg) } }
动画和变换功能目前只在 –webkit 浏览器中有效，其他主流浏览器——当然 IE 除外——只显示通过 border-radius 渲染的静态版本太阳系。
Internet Explorer 的平行扁宇宙：
IE 中的太阳系
嗯，Internet Explorer 眼里我们的宇宙无聊得欠扁。
如您所见，现在几行 CSS 就可以实现令人印象灰常深刻的效果。
哦，我承认……我把冥王星留下来了 
效果不错，确实chrome有些小卡，但是效果还是真不错的
要是轨道不是圆形的就好了。或者观察者能从不同的角度去看。
不错的实验，支持一下楼主
跟css3无关！
水星的说明“但到了夜晚，温度会降至零下数千度。”！！绝对零度不是-273.15℃吗？难道水星穿越了？
效果不错，不过纠正一点（与web无关），关于水星的：“但到了夜晚，温度会降至零下数千度”
绝对零度也只是-273度，而且只是理论上的。水星的最低温度应该在零下100-200左右吧，我看了原作者的页面，写的是hundreds of degrees below freezing，你翻译的夸张了点……
抱歉哇 翻译时用的字体比较宽 看走眼了= =|||~
你用了webkit专用的代码，IE当然无效果了。
不能一概而论
只有动画效果用了目前 webkit “专有”的属性。
这是原创吗？我很早就在国外的博客看到了这个，如果是翻译，应该加上国外作者的地址吧?
第一行的斜体字里呢~
整一堆webkit的属性，还好意思说CSS3
只有动画效果属性只有 webkit 能够支持
其他 webkit 属性附近都有相对应的标准属性 完全符合 css3 规范
请用IE9预览版跑跑看。（先设置IE的中文默认字体为“宋体”否则汉字变框）
可惜不是会动的。。
看不着。用的IE7。。