<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 100vh;
			overflow: hidden;
            background-color: #000;
            perspective: 800px;
        }
        .center{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -100px -100px;
            /* border: 1px solid #fff; */
            border-radius: 50%;
            transform-style: preserve-3d;
            animation: move 15s linear infinite;
        }
        .center>div{
            width: 200px;
			height: 200px;
			position: absolute;
			left: 0px;
			top: 0px;
			border: 1px solid #F9D91B;
			border-radius: 50%;
			/* box-shadow: 0px 0px 10px #F9D91B; */
        }
        .border1{
            width: 300px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -150px -150px;
            border: 1px solid #fff;
            border-radius: 50%;
            transform-style: preserve-3d;
            animation: move1 15s linear infinite;
        }
        .border1>div{
            width: 60px;
			height: 60px;
			position: absolute;
			left: 0px;
			top: 0px;
			border: 1px solid #F9D91B;
			border-radius: 50%;
			/* box-shadow: 0px 0px 10px #F9D91B; */
        }
        .border2{
            width: 400px;
            height: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -200px -200px;
            border: 1px solid #fff;
            border-radius: 50%;
            transform-style: preserve-3d;
            animation: move2 15s linear infinite;
        }
        .border2>div{
            width: 80px;
			height: 80px;
			position: absolute;
			left: 0px;
			top: 0px;
			border: 1px solid #F9D91B;
			border-radius: 50%;
			/* box-shadow: 0px 0px 10px #F9D91B; */
        }
        .border3{
            width: 500px;
            height: 500px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -250px -250px;
            border: 1px solid #fff;
            border-radius: 50%;
            transform-style: preserve-3d;
            animation: move3 15s linear infinite;
        }
        .border3>div{
            width: 100px;
			height: 100px;
			position: absolute;
			left: 0px;
			top: 0px;
			border: 1px solid #F9D91B;
			border-radius: 50%;
			/* box-shadow: 0px 0px 10px #F9D91B; */
        }

        @keyframes move {
			from{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
			to{ transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
		}
        @keyframes move1 {
			from{ transform: rotateZ(0deg);}
			to{ transform: rotateZ(360deg);}
		}
        @keyframes move2 {
			from{ transform: rotateZ(90deg);}
			to{ transform: rotateZ(360deg);}
		}
        @keyframes move3 {
			from{ transform: rotateZ(180deg);}
			to{ transform: rotateZ(360deg);}
		}
        .stage div:nth-child(1){transform: rotateX(20deg);}
		.stage div:nth-child(2){transform: rotateX(40deg);}
		.stage div:nth-child(3){transform: rotateX(60deg);}
		.stage div:nth-child(4){transform: rotateX(80deg);}
		.stage div:nth-child(5){transform: rotateX(100deg);}
		.stage div:nth-child(6){transform: rotateX(120deg);}
		.stage div:nth-child(7){transform: rotateX(140deg);}
		.stage div:nth-child(8){transform: rotateX(160deg);}
		.stage div:nth-child(9){transform: rotateX(180deg);}
		.stage div:nth-child(10){transform: rotateY(20deg);}
		.stage div:nth-child(11){transform: rotateY(40deg);}
		.stage div:nth-child(12){transform: rotateY(60deg);}
		.stage div:nth-child(13){transform: rotateY(80deg);}
		.stage div:nth-child(14){transform: rotateY(100deg);}
		.stage div:nth-child(15){transform: rotateY(120deg);}
		.stage div:nth-child(16){transform: rotateY(140deg);}
		.stage div:nth-child(17){transform: rotateY(160deg);}
		.stage div:nth-child(18){transform: rotateY(180deg);}
    </style>
</head>
<!-- 剧场 -->
<body>
    <!-- 舞台-1 -->
     <div class="stage center">
        <!-- 演员 -->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
     </div>
     <!-- 舞台-2 -->
     <div class="stage border1">
        <!-- 演员 -->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
     </div>
     <!-- 舞台-3 -->
     <div class="stage border2">
        <!-- 演员 -->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
     </div>
     <!-- 舞台-4 -->
     <div class="stage border3">
        <!-- 演员 -->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
     </div>
</body>
</html>
修改1：将stage下面div组成的3D球体中心位置在对应父级（border1、...）宽度的边框上，目前3D球体中心位置偏边框的外面
修改2：整体所有的平面倾斜，注意是3D效果的倾斜