gitbub地址
效果展示 由于網(wǎng)絡(luò)問題，可能加載較慢

1. 各個星球軌跡的實現(xiàn)

1. 先把邊框變成一個圓然后利用css3的transform: rotateX(65deg);讓圓形繞x軸3D旋轉(zhuǎn)一定角度
2. 然后把最外的包裹層的div利用transform: rotateZ(-8deg);這樣就實現(xiàn)了平常我們認(rèn)為的平面的星球軌跡的樣子

2. 各個星球的自轉(zhuǎn)

• css動畫

animation: circle 30s linear infinite;
@keyframes circle {
  to {
    transform: rotate(1turn);
  }
}

3. 星球繞太陽公轉(zhuǎn)（橢圓運動）

1. 讓星球先用transform-origin設(shè)置旋轉(zhuǎn)的中心點然后旋轉(zhuǎn)（圓運動）
2. 然后星球的包裹層橫向運動實現(xiàn)橢圓運動