用css代码简单的构建一个旋转的球
<!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> *{ margin: 0; padding: 0; } body{ background:black ; } ul li { list-style: none; } .box{ width: 300px; height: 300px; position: fixed; left: 0;right: 0; top: 0;bottom: 0; margin: auto; transform-style: preserve-3d; transform: rotatex(51deg) rotatey(26deg); animation: ulrotate 10s linear infinite; } .box li{ width: 298px; height: 298px; border: 1px solid red; border-radius: 100%; position: absolute; } .rotatex1{ transform: rotatex(20deg); } .rotatex2{ transform: rotatex(40deg); } .rotatex3{ transform: rotatex(60deg); } .rotatex4{ transform: rotatex(80deg); } .rotatex5{ transform: rotatex(100deg); } .rotatex6{ transform: rotatex(120deg); } .rotatex7{ transform: rotatex(140deg); } .rotatex8{ transform: rotatex(160deg); } .rotatex9{ transform: rotatex(180deg); } .rotatey1{ transform: rotatey(20deg); } .rotatey2{ transform: rotatey(40deg); } .rotatey3{ transform: rotatey(60deg); } .rotatey4{ transform: rotatey(80deg); } .rotatey5{ transform: rotatey(100deg); } .rotatey6{ transform: rotatey(120deg); } .rotatey7{ transform: rotatey(140deg); } .rotatey8{ transform: rotatey(160deg); } .rotatey9{ transform: rotatey(180deg); } @keyframes ulrotate{ 0%{ transform: rotatex(51deg) rotatey(26deg) rotatez(0deg); } 100%{ transform: rotatex(51deg) rotatey(26deg) rotatez(360deg); } } </style>
</head>
<body>
<ul class="box">
<li class="rotatex1"></li>
<li class="rotatex2"></li>
<li class="rotatex3"></li>
<li class="rotatex4"></li>
<li class="rotatex5"></li>
<li class="rotatex6"></li>
<li class="rotatex7"></li>
<li class="rotatex8"></li>
<li class="rotatex9"></li>
</ul>
<ul class="box">
<li class="rotatey1"></li>
<li class="rotatey2"></li>
<li class="rotatey3"></li>
<li class="rotatey4"></li>
<li class="rotatey5"></li>
<li class="rotatey6"></li>
<li class="rotatey7"></li>
<li class="rotatey8"></li>
<li class="rotatey9"></li>
</ul>
</body>
</html>
