用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>