代码参考： css3动画—— 星系轨道

CSS3橙色的星球绕轨道公转动画

http://hovertree.com/texiao/css3/24/　　例子

http://hovertree.com/h/bjaf/css3xingxi.htm　　原文

HTML代码：

<!-- <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/css3/24/css/css.css"> -->
<link rel="stylesheet" type="text/css" href="css.css">
<div class="ui-base u-p3d">
    <div class="ball-c">何问起</div>
    <div class="base u-p3d">
        <div class="pan"></div>
        <div class="ball-base u-p3d ball-1"><div class="ball">JS代码</div></div>
        <div class="ball-base u-p3d ball-2"><div class="ball">网页特效</div></div>
        <div class="ball-base u-p3d ball-3"><div class="ball">HoverTreeSCJ</div></div>
        <div class="ball-base u-p3d ball-4"><div class="ball">HoverTree</div></div>
        <div class="ball-base u-p3d ball-5"><div class="ball">月亮</div></div>
        <div class="ball-base u-p3d ball-6"><div class="ball">柯乐义</div></div>
    </div>
</div>

CSS代码：

/* 何问起 hovertree.com */
body{background:#fff;font-family:microsoft yahei;}
@-webkit-keyframes cir1 {
  0% {-webkit-transform:rotateY(0deg) rotateZ(10deg);}
  100% {-webkit-transform:rotateY(-360deg) rotateZ(10deg);}
}
@keyframes cir1 {
  0% {transform:rotateY(0deg) rotateZ(10deg);}
  100% {transform:rotateY(-360deg) rotateZ(10deg);}
}
@-webkit-keyframes cir2 {
  0% {-webkit-transform:rotateY(-60deg) rotateZ(10deg);}
  100% {-webkit-transform:rotateY(-420deg) rotateZ(10deg);}
}
@keyframes cir2 {
  0% {transform:rotateY(-60deg) rotateZ(10deg);}
  100% {transform:rotateY(-420deg) rotateZ(10deg);}
}
@-webkit-keyframes cir3 {
  0% {-webkit-transform:rotateY(-120deg) rotateZ(10deg);}
  100% {-webkit-transform:rotateY(-480deg) rotateZ(10deg);}
}
@keyframes cir3 {
  0% {transform:rotateY(-120deg) rotateZ(10deg);}
  100% {transform:rotateY(-480deg) rotateZ(10deg);}
}
@-webkit-keyframes cir4 {
  0% {-webkit-transform:rotateY(-180deg) rotateZ(10deg);}
  100% {-webkit-transform:rotateY(-540deg) rotateZ(10deg);}
}
@keyframes cir4 {
  0% {transform:rotateY(-180deg) rotateZ(10deg);}
  100% {transform:rotateY(-540deg) rotateZ(10deg);}
}
@-webkit-keyframes cir5 {
  0% {-webkit-transform:rotateY(-240deg) rotateZ(10deg);}
  100% {-webkit-transform:rotateY(-600deg) rotateZ(10deg);}
}
@keyframes cir5 {
  0% {transform:rotateY(-240deg) rotateZ(10deg);}
  100% {transform:rotateY(-600deg) rotateZ(10deg);}
}
@-webkit-keyframes cir6 {
  0% {-webkit-transform:rotateY(-300deg) rotateZ(10deg);}
  100% {-webkit-transform:rotateY(-660deg) rotateZ(10deg);}
}
@keyframes cir6 {
  0% {transform:rotateY(-300deg) rotateZ(10deg);}
  100% {transform:rotateY(-660deg) rotateZ(10deg);}
}
@keyframes cir {
  0% {transform:rotateX(80deg) rotateY(-10deg) rotateZ(0deg);}
  100% {transform:rotateX(80deg) rotateY(-10deg) rotateZ(-360deg);}
}
@keyframes cirppp {
  0% {transform:rotateZ(0deg);}
  100% {transform:rotateZ(-360deg);}
}
@-webkit-keyframes cir {
  0% {-webkit-transform:rotateX(80deg) rotateY(-10deg) rotateZ(0deg);}
  100% {-webkit-transform:rotateX(80deg) rotateY(-10deg) rotateZ(-360deg);}
}
@-webkit-keyframes cirppp {
  0% {-webkit-transform:rotateZ(0deg);}
  100% {-webkit-transform:rotateZ(-360deg);}
}

.u-p3d{
    -webkit-transform-style:preserve-3d !important;
    transform-style:preserve-3d !important;
}
.ui-base {position:relative;width:400px;height:0px;margin:80px auto;
    -webkit-perspective:1000px;
    -webkit-perspective-origin:50% 0%;
    perspective:1000px;
    perspective-origin:50% 0%;
}
.base{position:relative;width:350px;height:350px;
    -webkit-transform:rotateX(80deg) rotateY(-10deg);
    transform:rotateX(80deg) rotateY(-10deg);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    animation:cir 10s linear 0s infinite;
}
.ball-base {position:absolute;top:175px;left:-50px;width:225px;height:127px;
    -webkit-transform-origin:225px 0px;
    transform-origin:225px 0px;
}
.ball{position:absolute;width:90px;height:90px;line-height:90px;text-align:center;left:0px;top:0px;color:rgba(255, 255, 255, 0);font-size:12px;overflow:hidden;
    -webkit-transition:all 2s ease-out 0ms;
    transition:all 2s ease-out 0ms;
    -webkit-transform-origin:50% 50%;
    transform-origin:50% 50%;
    background-image:url(http://hovertree.com/texiao/css3/24/images/hovertreeball.png);
    background-size:100% 100%;
    opacity:1;
}
.ball-c {position:absolute;width:157px;height:157px;line-height:157px;text-align:center;left:90px;top:50px;color:#fff;font-size:24px;
    -webkit-transform-origin:50% 50%;
    transform-origin:50% 50%;
    background-image:url(http://hovertree.com/texiao/css3/24/images/ball_center.png);
}
.pan {position:absolute;width:100%;height:100%;
    background-image:url("http://hovertree.com/texiao/css3/24/images/c.png");
    background-size:100% 100%;
    -webkit-animation:cirppp 5s linear 0s infinite;
    animation:cirppp 5s linear 0s infinite;
}
.ball {color:#fff;opacity:1;}
.ball-1 .ball {
    transform:rotateY(10deg) rotateZ(10deg);
    animation:cir1 10s linear 0s infinite;
    -webkit-transition-delay:1100ms !important;
    transition-delay:1100ms !important;
}
.ball-2 .ball {
    -webkit-animation:cir2 10s linear 0s infinite;
        animation:cir2 10s linear 0s infinite;
        -webkit-transition-delay:900ms !important;
    transition-delay:900ms !important;
}
.ball-3 .ball {
    -webkit-animation:cir3 10s linear 0s infinite;
    animation:cir3 10s linear 0s infinite;
    -webkit-transition-delay:700ms !important;
    transition-delay:700ms !important;
}
.ball-4 .ball {
    -webkit-animation:cir4 10s linear 0s infinite;
    animation:cir4 10s linear 0s infinite;
    -webkit-transition-delay:500ms !important;
    transition-delay:500ms !important;
}
.ball-5 .ball {
    -webkit-animation:cir5 10s linear 0s infinite;
    animation:cir5 10s linear 0s infinite;
    -webkit-transition-delay:300ms !important;
    transition-delay:300ms !important;
}
.ball-6 .ball {
    -webkit-animation:cir6 10s linear 0s infinite;
    animation:cir6 10s linear 0s infinite;
    -webkit-transition-delay:100ms !important;
    transition-delay:100ms !important;
}

.ball-1 {
    -webkit-transform:rotateX(-90deg) rotateY(0deg) translateY(-70px);
    transform:rotateX(-90deg) rotateY(0deg) translateY(-70px);
}
.ball-2 {
    -webkit-transform:rotateX(-90deg) rotateY(60deg) translateY(-70px);
    transform:rotateX(-90deg) rotateY(60deg) translateY(-70px);
}
.ball-3 {
    -webkit-transform:rotateX(-90deg) rotateY(120deg) translateY(-70px);
    transform:rotateX(-90deg) rotateY(120deg) translateY(-70px);
}
.ball-4 {
    -webkit-transform:rotateX(-90deg) rotateY(180deg) translateY(-70px);
    transform:rotateX(-90deg) rotateY(180deg) translateY(-70px);
}
.ball-5 {
    -webkit-transform:rotateX(-90deg) rotateY(240deg) translateY(-70px);
    transform:rotateX(-90deg) rotateY(240deg) translateY(-70px);
}
.ball-6 {
    -webkit-transform:rotateX(-90deg) rotateY(300deg) translateY(-70px);
    transform:rotateX(-90deg) rotateY(300deg) translateY(-70px);
}

...