rotates the lower circle. The cause is unknown. Is it encountered again?
<div class="main-info-top clearfix">
<div class="main-info-rotate" style="transform: perspective(800px) rotateX(-10deg) rotateY(158.878deg);">
<li style="transition: all 1s ease 100ms; transform: rotateY(0deg) translateZ(300px);"><img src="./_files/data-branch_7b1eb3fa.jpg"></li>
<li style="transition: all 1s ease 90ms; transform: rotateY(36deg) translateZ(300px);"><img src="./_files/data-branch_887d71b2.jpg"></li>
<li style="transition: all 1s ease 80ms; transform: rotateY(72deg) translateZ(300px);"><img src="./_files/data-branch_cccd14cc.jpg"></li>
<li style="transition: all 1s ease 70ms; transform: rotateY(108deg) translateZ(300px);"><img src="./_files/data-branch_eec1a5d1.jpg"></li>
<li style="transition: all 1s ease 60ms; transform: rotateY(144deg) translateZ(300px);"><img src="./_files/data-branch_5dbf0e29.jpg"></li>
<li style="transition: all 1s ease 50ms; transform: rotateY(180deg) translateZ(300px);"><img src="./_files/data-branch_390b4651.jpg"></li>
<li style="transition: all 1s ease 40ms; transform: rotateY(216deg) translateZ(300px);"><img src="./_files/data-branch_e21b4e28.jpg"></li>
<li style="transition: all 1s ease 30ms; transform: rotateY(252deg) translateZ(300px);"><img src="./_files/data-branch_d7d2a670.jpg"></li>
<li style="transition: all 1s ease 20ms; transform: rotateY(288deg) translateZ(300px);"><img src="./_files/data-branch_3d5442fb.jpg"></li>
<li style="transition: all 1s ease 10ms; transform: rotateY(324deg) translateZ(300px);"><img src="./_files/data-branch_640d8b80.jpg"></li>
</div>
<div class="main-info-page dark-theme simple-pagination">
<ul>
<li class="disabled"><span class="current prev"><</span></li>
<li class="active"><span class="current">1</span></li>
<li><a href="javascript：;" class="page-link">2</a></li>
<li><a href="javascript：;" class="page-link next">></a></li>
</ul>
</div>
</div>.main-info-rotate {
width: 120px;
height: 180px;
margin: 80px auto 0;
position: relative;
transform-style: preserve-3d;
transform: perspective(800px) rotateX(-10deg);
}
.main-info-rotate li {
position: absolute;
left: 0;
top: 0;
list-style-type: none;
cursor: pointer;
}
.main-info-rotate img {
width: 100%;
height: 100%;
border-radius: 10px;
box-shadow: 0px 0px 10px -sharpfff;
-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
}
.main-info-rotate p {
width: 1200px;
height: 1200px;
background: -webkit-radial-gradient(center center, 600px 600px, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
position: absolute;
top: 100%;
left: 50%;
margin-top: -600px;
margin-left: -600px;
border-radius: 600px;
transform: rotateX(90deg);
}