CSS中使用transform: rotate()时保持对象朝向恒定的实现方案

你当前通过transform: rotate(360deg)实现土星绕太阳公转，但轨道容器的旋转会带动土星本体一起转动，导致其朝向随运行路径改变。你希望土星沿轨道运行时始终保持固定的外观朝向，无需使用offset-rotate的话，可以通过给土星本体添加反向同周期旋转动画的方式解决。

修改后的代码（CSS部分） #

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    overflow: hidden;
}

/* general config for planets' orbital paths */
.saturn {
    position: absolute;
    border-style: solid;
    border-color: white transparent transparent transparent; 
    border-width: 0.1em 0.1em 0 0;
    border-radius: 50%;
    top: -55em;
    left: -55em;
    width: 150em;
    height: 150em;
    animation: orbit 5.25s linear infinite; /* 土星公转周期 */
}

.saturn::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    top: 18em;
    right: 18em;
    width: 7em;
    height: 7em;
    background-color: rgb(234, 214, 184);
    /* 添加反向旋转动画，抵消容器的旋转 */
    animation: counter-orbit 5.25s linear infinite;
}

@keyframes orbit {
    to {
        transform: rotate(360deg);
    }
}

/* 新增反向旋转动画 */
@keyframes counter-orbit {
    to {
        transform: rotate(-360deg);
    }
}

原理说明 #

• 轨道容器.saturn以5.25秒为周期顺时针旋转360度，实现公转效果；
• 土星本体.saturn::before以相同周期逆时针旋转360度，刚好抵消容器带来的旋转，从而保持自身朝向固定。

如果你的土星还有环（.ring元素），同样给它加上counter-orbit动画即可，确保整个土星系统的朝向都保持一致。

内容的提问来源于stack exchange，提问作者Mir