HTML如何制作太阳系模型？行星轨道怎么动画？

<div class="solar-system">     <div class="sun"></div>     <div class="orbit-mercury">         <div class="planet mercury"></div>     </div>     <div class="orbit-venus">         <div class="planet venus"></div>     </div>     <!-- 更多行星和它们的轨道 --> </div>

.solar-system

orbit-xxx

transform-origin

rotateY()

.solar-system {     position: relative;     width: 600px; /* 示例尺寸 */     height: 600px;     margin: 50px auto;     border-radius: 50%;     /* 核心：透视效果 */     perspective: 1000px;     transform-style: preserve-3d; /* 允许子元素继承3D变换 */ }  .sun {     position: absolute;     top: 50%;     left: 50%;     width: 50px;     height: 50px;     background-color: orange;     border-radius: 50%;     transform: translate(-50%, -50%); /* 定位到中心 */     box-shadow: 0 0 20px 5px rgba(255, 165, 0, 0.7); }  /* 轨道和行星的通用样式 */ .orbit-mercury, .orbit-venus {     position: absolute;     top: 50%;     left: 50%;     /* 轨道容器的旋转原点是其自身的中心，也就是太阳的中心 */     transform-origin: 0 0; /* 确保旋转是围绕太阳中心 */     width: 1px; /* 轨道容器本身可以很小，不显示 */     height: 1px; }  .planet {     position: absolute;     border-radius: 50%;     /* 行星相对于其轨道容器的定位 */     top: 0;     left: 0;     /* 通过translateZ来设置距离，模拟径向距离 */     /* 不同的行星有不同的translateZ值和尺寸 */ }  .mercury {     width: 10px;     height: 10px;     background-color: gray;     transform: translateZ(80px); /* 离太阳的距离 */ }  .venus {     width: 15px;     height: 15px;     background-color: #DAA520; /* 金色 */     transform: translateZ(120px); /* 离太阳的距离 */ }

solar-system-container

position: relative

transform-style: preserve-3d;

top: 50%; left: 50%; transform: translate(-50%, -50%);

box-shadow

transform: rotate()

transform-origin: 0 0;

translateZ()

transform: rotateY()

border-radius: 50%;

<div class="solar-system-container">     <div class="sun"></div>     <!-- 水星 -->     <div class="planet-orbit mercury-orbit">         <div class="planet mercury"></div>     </div>     <!-- 金星 -->     <div class="planet-orbit venus-orbit">         <div class="planet venus"></div>     </div>     <!-- 更多行星... --> </div>

.solar-system-container {     width: 800px;     height: 800px;     position: relative;     margin: 50px auto;     perspective: 1500px; /* 模拟景深 */     transform-style: preserve-3d; /* 确保3D子元素能正确显示 */     /* 背景色或其他装饰 */     background-color: #000;     overflow: hidden; /* 防止行星跑到外面去 */ }  .sun {     position: absolute;     top: 50%;     left: 50%;     width: 80px;     height: 80px;     background-color: #FFD700; /* 金色 */     border-radius: 50%;     transform: translate(-50%, -50%);     box-shadow: 0 0 50px 10px rgba(255, 215, 0, 0.8);     z-index: 100; /* 确保在最前面 */ }  .planet-orbit {     position: absolute;     top: 50%;     left: 50%;     width: 1px; /* 轨道容器本身不需要宽度 */     height: 1px;     transform-origin: 0 0; /* 关键：旋转中心是太阳的中心 */     transform-style: preserve-3d; /* 确保行星的3D变换也保留 */ }  .planet {     position: absolute;     border-radius: 50%;     background-color: #ccc; /* 默认颜色 */     /* 行星相对于其轨道容器的定位 */     top: 0;     left: 0;     /* 初始的位移，决定行星离太阳的距离，这里用translateX或translateY更直观 */     /* 不同的行星有不同的translateX值和尺寸 */ }  /* 具体行星样式 */ .mercury-orbit {     /* 初始旋转角度，可以调整行星的起始位置 */     transform: rotateY(0deg); } .mercury {     width: 12px;     height: 12px;     background-color: #A9A9A9;     transform: translateX(100px); /* 距离太阳100px */ }  .venus-orbit {     transform: rotateY(90deg); /* 初始位置错开 */ } .venus {     width: 18px;     height: 18px;     background-color: #DAA520;     transform: translateX(160px); /* 距离太阳160px */ } /* ... 更多行星 ... */

const sun = document.querySelector('.sun'); const mercuryOrbit = document.querySelector('.mercury-orbit'); const mercury = document.querySelector('.mercury'); const venusOrbit = document.querySelector('.venus-orbit'); const venus = document.querySelector('.venus');  // 定义行星的公转和自转速度（度/帧） // 这里的数值需要根据实际效果调整，可以理解为相对速度 const planetSpeeds = {     mercury: { orbit: 0.8, self: 2 },     venus: { orbit: 0.5, self: 1.5 },     // ... 其他行星 };  let currentAngles = {     mercuryOrbit: 0,     mercurySelf: 0,     venusOrbit: 0,     venusSelf: 0,     // ... };  function animateSolarSystem() {     // 更新水星角度     currentAngles.mercuryOrbit += planetSpeeds.mercury.orbit;     currentAngles.mercurySelf += planetSpeeds.mercury.self;     mercuryOrbit.style.transform = `rotateY(${currentAngles.mercuryOrbit}deg)`;     mercury.style.transform = `translateX(100px) rotateY(${currentAngles.mercurySelf}deg)`;      // 更新金星角度     currentAngles.venusOrbit += planetSpeeds.venus.orbit;     currentAngles.venusSelf += planetSpeeds.venus.self;     venusOrbit.style.transform = `rotateY(${currentAngles.venusOrbit}deg)`;     venus.style.transform = `translateX(160px) rotateY(${currentAngles.venusSelf}deg)`;      // ... 更新其他行星      requestAnimationFrame(animateSolarSystem); }  // 启动动画 animateSolarSystem();