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

使用简单的 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 回答
1

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

CSS3 太阳系

于 2013-08-19T08:15:37.967 回答
0

我也找到了简单的答案：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/

于 2013-08-21T04:19:11.840 回答