html + css3实现太阳系模型

作者: WMLJS | 来源:发表于2017-08-06 11:51 被阅读246次

gitbub地址
效果展示 由于网络问题,可能加载较慢

1. 各个星球轨迹的实现

  1. 先把边框变成一个圆然后利用css3的transform: rotateX(65deg);让圆形绕x轴3D旋转一定角度
  2. 然后把最外的包裹层的div利用transform: rotateZ(-8deg);这样就实现了平常我们认为的平面的星球轨迹的样子

2. 各个星球的自转

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

3. 星球绕太阳公转(椭圆运动)

  1. 让星球先用transform-origin设置旋转的中心点然后旋转(圆运动)
  2. 然后星球的包裹层横向运动实现椭圆运动

相关文章

网友评论

    本文标题:html + css3实现太阳系模型

    本文链接:https://www.haomeiwen.com/subject/eimglxtx.html