css简单实现星球旋转效果先上图总体思路是，3d翻转，旋转大圆，同时小圆反向自转，相互抵消，视觉效果就是小圆一直是正面

先上图
ezgif.com-gif-maker (1).gif
总体思路是，3d翻转，旋转大圆，同时小圆反向自转，相互抵消，视觉效果就是小圆一直是正面显示小圆角度和位置可以自己调整
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes boxRotate {
            0% {
                -webkit-transform: rotateX(80deg) rotateY(-10deg) rotateZ(0deg)
            }

            100% {
                -webkit-transform: rotateX(80deg) rotateY(-10deg) rotateZ(-360deg)
            }
        }

        @keyframes circle1 {
            0% {
                transform: rotateX(-87deg) rotateY(0deg) ;
            }

            100% {
                transform: rotateX(-87deg) rotateY(-360deg) ;
            }
        }

        @keyframes circle2 {
            0% {
                -webkit-transform: rotateX(-80deg) rotateY(10deg) 
            }

            100% {
                -webkit-transform: rotateX(-80deg) rotateY(-350deg) 
            }
        }

        @keyframes circle3 {
            0% {
                -webkit-transform: rotateX(-75deg) rotateY(10deg) 
            }

            100% {
                -webkit-transform: rotateX(-75deg) rotateY(-350deg) 
            }
        }

        @keyframes circle4 {
            0% {
                -webkit-transform: rotateX(-80deg) rotateY(0deg) 
            }

            100% {
                -webkit-transform: rotateX(-80deg) rotateY(-360deg) 
            }
        }
        @keyframes circle5 {
            0% {
                -webkit-transform: rotateX(-75deg) rotateY(10deg) 
            }

            100% {
                -webkit-transform: rotateX(-75deg) rotateY(-350deg) 
            }
        }

        body {
            position: relative;
            height: 800px;
            
            perspective: 500px;
            perspective-origin: 50% 0%
        }

        .box {
            
            margin: 100px 300px;
            width: 300px;
            height: 300px;
            border: 5px solid rgba(0, 159, 241, .6);
            border-radius: 150px;
            transform-style: preserve-3d;
            transform: rotateX(80deg) rotateY(-10deg) rotateZ(0deg);
            animation: boxRotate 20s linear infinite;
            animation-play-state: running;
        }
        .box:hover {
            animation-play-state: paused;
        }
        .box:hover .circle {
            animation-play-state: paused;
        }
        .box:hover .circle5 {
            animation-play-state: paused;
        }

        .circle {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 25px;
            transform: none;

        }

        .circle1 {
            left: 10px;
            top: 25px;
            background: radial-gradient(circle at 70px 70px,#5cabff,#000000);
            /* transform: rotateX(-87deg) rotateY(0deg)  ; */
            
            animation: circle1 20s linear infinite;
        }

        .circle2 {
            right: 35px;
            top: 0;
            background: radial-gradient(circle at 100px 100px, #5cabff, #000);;
            /* transform: rotateX(-71deg) rotateY(-16deg) rotateZ(0deg); */
            animation: circle2 20s linear infinite;
        }

        .circle3 {
            right: 35px;
            bottom: 0;
            background: radial-gradient(circle at 70px 70px,#5cabff,#000000);
            /* transform: rotateX(-63deg) rotateY(-19deg); */
            animation: circle3 20s linear infinite;
        }

        .circle4 {
            left: 35px;
            bottom: 0;
            background: radial-gradient(circle at 70px 70px,#5cabff,#000000);
            /* transform: rotateX(-60deg) rotateY(10deg); */
            animation: circle4 20s linear infinite;
        }
        .circle5 {
            position: absolute;
            left: 36%;
            top: 32%;
            transform:translateZ(-30px);
            width: 80px;
            height: 80px;
            border-radius: 40px;
            background: radial-gradient(circle at 70px 70px,#eedf0a,#000000);
            /* transform: rotateX(-80deg) rotateY(0deg); */
            animation: circle5 20s linear infinite;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="circle circle1"></div>
        <div class="circle circle2"></div>
        <div class="circle circle3"></div>
        <div class="circle circle4"></div>
        <div class="circle5"></div>
    </div>
</body>

</html>