繞css3旋轉中心

Question

事實上，我想爲教育目的製造太陽能系統！所以一個大的黃色圓圈應該在中間，其他人應該旋轉！但我沒有任何想法！只是幫助棘手的事情，我會發現其他的東西！我發現下面的代碼，但它只是繞着他自己旋轉！

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); 
    } 
} 

現場演示：http://jsfiddle.net/hamidrezabstn/bLqak/

Answer 1

使用CSS3請參閱本教程/例如用於太陽能系統：

CSS3 Solar System

Answer 2

我找到了答案很簡單太：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)} 
} 

演示：http://jsfiddle.net/hamidrezabstn/fgcPa/3/embedded/result/

Answer 3

使用簡單的CSS將這樣的伎倆：

http://lea.verou.me/2012/02/moving-an-element-along-a-circle/

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