css动画实现老式轮播盘电话转盘轮播效果

<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
  </div>
  
  
  <style>
.box{
    width: 1000px;
    height: 800px;
    transform: rotateX(-45deg);
}

.item{
    position: absolute;
    text-align: center;
    left: 50%;
    -webkit-transform-origin: 0rem 12rem;
    transform-origin: 0rem 12rem;
    opacity: 0;
    transform: scale(1, 1.5);
}
.item:nth-child(1){
    animation: orbitrotate 21s linear -0s normal none infinite;
}
.item:nth-child(2){
    animation: orbitrotate 21s linear -3s normal none infinite;
}
.item:nth-child(3){
    animation: orbitrotate 21s linear -6s normal none