CSS3倾斜旋转的球体

CSS3倾斜旋转的球体

html:

<div id="d1">
<div class="d1-1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

css:

html{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: black;
overflow: hidden;
}
#d1{
width: 300px;
height: 300px;
border: 2px solid white;
border-radius: 50%;
position: absolute;
top: 30%;
left: 40%;
transform: rotateZ(-30deg);
}
/* 绘制黄色 线条，倾斜显示 */
#d1::after{
content: '';
width: 1px;
height: 500px;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
transform: translateX(150px) translateY(-100px);
}
#d1 .d1-1{
height: 100%;
transform-style: preserve-3d;
animation: loading 2s linear 0s infinite;
}
/* 设置5个div盒子的显示方式 */
#d1 .d1-1 div:nth-child(1){
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
border: 1px solid red;
transform: rotateZ(36deg);
}
#d1 .d1-1 div:nth-child(2){
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
border: 1px solid green;
transform: rotateY(72deg);
}
#d1 .d1-1 div:nth-child(3){
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
border: 1px solid blue;
transform: rotateY(108deg);
}
#d1 .d1-1 div:nth-child(4){
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
border: 1px solid yellow;
transform: rotateY(144deg);
}
#d1 .d1-1 div:nth-child(5){
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
border: 1px solid #b2850d;
transform: rotateY(180deg);
}
@keyframes loading{
0%{
transform: rotateY(180deg);
}
100%{
transform: rotateY(360deg);
}
}