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

使用简单的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);
}
}

Answer 3

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

用css3旋转中心

3 个答案: