1. 各個星球軌跡的實(shí)現(xiàn)
- 先把邊框變成一個圓然后利用css3的transform: rotateX(65deg);讓圓形繞x軸3D旋轉(zhuǎn)一定角度
- 然后把最外的包裹層的div利用transform: rotateZ(-8deg);這樣就實(shí)現(xiàn)了平常我們認(rèn)為的平面的星球軌跡的樣子
2. 各個星球的自轉(zhuǎn)
- css動畫
animation: circle 30s linear infinite;
@keyframes circle {
to {
transform: rotate(1turn);
}
}
3. 星球繞太陽公轉(zhuǎn)（橢圓運(yùn)動）
- 讓星球先用transform-origin設(shè)置旋轉(zhuǎn)的中心點(diǎn)然后旋轉(zhuǎn)（圓運(yùn)動）
- 然后星球的包裹層橫向運(yùn)動實(shí)現(xiàn)橢圓運(yùn)動
