0

実際、私は教育目的で太陽系を作りたいです! そのため、大きな黄色の円が真ん中にあり、他の円が回転するはずです! しかし、私は何の考えもありません！スピニングを手伝ってくれれば、他のことを見つけます！私は以下のコードを見つけましたが、それは彼自身の周りを回っているだけです! 

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/

4

3 に答える 3

1

CSS3 を使用した太陽系については、このチュートリアル/例を参照してください。

CSS3 太陽系

于 2013-08-19T08:15:37.967 に答える
1

シンプルな 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);
}
}
于 2014-02-17T04:01:34.547 に答える