Javascript 使用css3围绕中心旋转

事实上，我想制造太阳系是为了教育目的！所以一个黄色的大圆圈应该在中间，其他的应该旋转！但是我不知道！只要帮助旋转的东西，我会找到其他的东西！我发现下面的代码，但它只是围绕着他自己旋转

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

---

现场演示：

有关使用CSS3的太阳能系统，请参阅本教程/示例：

---

我也找到了一个简单的答案：D

.deform  {
    width: 200px;
    height: 200px;
    transform: scaleX(3);
    background-color: lightblue;
    left: 270px;
    position: absolute;
    top: 50px;
    border-radius: 50%;
}

.rotate {
    width: 100%;
    height: 100%;
    animation: circle 10s infinite linear;    
    transform-origin: 50% 50%;
}

.counterrotate {
    width: 50px;
    height: 50px;
    animation: ccircle 5s infinite linear;    
}

.planet {
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius : 50px;
    left: 0px;
    top: 0px;
    background-color: red;
    display: block;

}

@keyframes circle {
    from {transform: rotateZ(0deg)}
    to {transform: rotateZ(360deg)}
}

@keyframes ccircle {
    from {transform: rotateZ(360deg)}
    to {transform: rotateZ(0deg)}
}

---

演示：

使用简单的CSS可以达到以下目的：

---

你不是指太阳系吗？：）是的，我会马上做，也许对你有帮助。我建议你不要用CSS。只需使用JS，您将有一个更轻松的时间。看看这些-银河系是一个星系，它将有点难以用CSS表示，可能是太阳系。。。

@keyframes rot {
from {
    transform: rotate(0deg)
               translate(-150px)
               rotate(0deg);
}
to {
    transform: rotate(360deg)
               translate(-150px) 
               rotate(-360deg);
}
}