绕圈运动中小球里的文字静止问题

用CSS3实现太阳系效果（“前端”小球不动），如何使其中的文字相对用户不旋转（效果如图），我的思路是让里面的文字也相对小球旋转，一开始文字都是逆时针旋转的，神奇的是“HTML”小球正常，但是另外两个小球中的文字还在相对用户旋转，然后我把这两个文字的旋转方向改为顺时针旋转（小球都是顺时针绕圈的）居然相对用户静止了（就是文字一直正立显示）！小白表示百思不得其解，求大神解答！完整代码如下（重点在.info123,另外也欢迎提出代码优化建议，再次感谢）：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>css3 winding</title>
    <style>
    #container {        width: 1000px;        height: 600px;        border: 2px solid #0F80FF;        position: relative;    }
    
    #ball0 {        position: absolute;        height: 80px;        width: 80px;        left: 50%;        top: 50%;        transform: translate(-50%, -50%);        background-color: #746DFF;        border-radius: 50%;        text-align: center;    }
    
    #ball1 {        position: absolute;        height: 60px;        width: 60px;        left: 60%;        top: 50%;        transform: translate(-50%, -50%) rotate(0);        background-color: #ddd;        border-radius: 50%;        transform-origin: -116.7% 50%;        animation: rotate_ball1 6s linear infinite;        text-align: center;    }
    
    #ball2 {        position: absolute;        height: 60px;        width: 60px;        left: 70%;        top: 50%;        transform: translate(-50%, -50%) rotate(120deg);        background-color: #ddd;        border-radius: 50%;        transform-origin: -283.3% 50%;        animation: rotate_ball2 10s linear infinite;        text-align: center;    }
    
    #ball3 {        position: absolute;        height: 60px;        width: 60px;        left: 80%;        top: 50%;        transform: translate(-50%, -50%) rotate(240deg);        background-color: #ddd;        border-radius: 50%;        transform-origin: -450% 50%;        animation: rotate_ball3 14s linear infinite;        text-align: center;    }
    
    .info0 {        display: block;        padding: 32px 0;    }
    
    .info1 {        display: block;        padding: 22px 0;        animation: rotate_info1 6s linear infinite reverse;    }
    
    .info2 {        display: block;        padding: 22px 0;        transform: rotate(-120deg);        animation: rotate_info2 10s linear infinite ;    }
    
    .info3 {        display: block;        padding: 22px 0;        transform: rotate(-240deg);        animation: rotate_info3 14s linear infinite ;    }
    
    #ball1:hover {        animation-play-state: paused;    }
    
    #ball1:hover .info1 {        animation-play-state: paused;    }
    
    #ball2:hover {        animation-play-state: paused;    }
    
    #ball2:hover .info2 {        animation-play-state: paused;    }
    
    #ball3:hover {        animation-play-state: paused;    }
    
    #ball3:hover .info3 {        animation-play-state: paused;    }
    
    @keyframes rotate_ball1 {        to {            transform: translate(-50%, -50%) rotate(1turn);        }
    }    
    @keyframes rotate_ball2 {        to {            transform: translate(-50%, -50%) rotate(480deg);        }
    }    
    @keyframes rotate_ball3 {        to {            transform: translate(-50%, -50%) rotate(600deg);        }
    }    
    @keyframes rotate_info1 {        to {            transform: rotate(1turn);        }
    }    
    @keyframes rotate_info2 { 
        to {            transform: rotate(-480deg);        }
    }    
    @keyframes rotate_info3 {
        to {            transform: rotate(-600deg);        }
    }    </style></head><body>
    <div id="container">
        <div id="ball0"><span class='info0'>前端</span></div>
        <div id="ball1"><span class="info1">HTML</span></div>
        <div id="ball2"><span class="info2">CSS</span></div>
        <div id="ball3"><span class="info3">JS</span></div>
    </div></body></html>

m慕光

浏览 1488回答 2

2回答

一笑莫白

.info1 { display: block; padding: 22px 0; animation: rotate_info1 6s linear infinite reverse;}.info2 { display: block; padding: 22px 0; transform: rotate(-120deg); animation: rotate_info2 10s linear infinite reverse;}.info3 { display: block; padding: 22px 0; transform: rotate(-240deg); animation: rotate_info3 14s linear infinite reverse;}是这个效果吗

随时随地看视频慕课网APP