3d旋转，让围绕某一个建筑转动

<template>
    <div>
        <div>3dRotate</div>
    <!-- 中间 -->
        <div class="center">
            <div class="bigger">
                <div class="animate">
                    <ul class="ball">
                        <li>
                            <div>
                                <div class="tip">
                                    <div>任务总量<span value="12"  class="num" style="color: #1fdbf5">12</span>条</div>
                                    <div>任务成功<span value="13" class="num"  style="color: #32ee16">11</span>个</div>
                                    <div>任务进行中<span value="14"  class="num" style="color: #f3804f">13</span>个</div>
                                    <div>任务失败<span value="15" class="num" style="color: #f34fd8">14</span>个</div>
                                </div>
                                <p>任务</p>
                                <img src="./images/rw@2x.png">
                            </div>
                        </li>
                        <li>
                        <div>
                            <div class="tip">
                            <div>总节点数<span value="22" class="num" style="color: #1fdbf5"></span>条</div>
                            <div>调度节点数<span value="22"  class="num" style="color: #32ee16"></span>个</div>
                            <div>爬虫节点数<span  value="22"  class="num" style="color: #f3804f"></span>个</div>
                            <div>存储节点数<span value="22"  class="num" style="color: #f34fd8"></span>个</div>
                            </div>
                            <p>调度</p>
                            <img src="./images/dd@2x.png">
                        </div>
                        </li>
                        <li>
                        <div>
                            <div class="tip">
                            <div>总采集量<span value="22" class="num" style="color: #1fdbf5"></span>条</div>
                            <div>文本采集<span value="22" class="num" style="color: #32ee16"></span>个</div>
                            <div>音视频采集<span value="22" class="num" style="color: #f3804f"></span>个</div>
                            </div>
                            <p>采集</p>
                            <img src="./images/cj@2x.png">
                        </div>
                        </li>
                        <li>
                        <div>
                            <div class="tip">
                            <div>总存储量<span value="22" class="num" style="color: #1fdbf5"></span>条</div>
                            <div>文本数据<span value="22" class="num" style="color: #32ee16"></span>条</div>
                            <div>音视频数据<span value="22" class="num" style="color: #f3804f"></span>条</div>
                            </div>
                            <p>存储</p>
                            <img src="./images/cc@2x.png">
                        </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.center {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 38%;
  height: 90vh;
  margin: 0 auto;
  border:1px solid red;
}

.box {
  //margin-bottom: 11px;
  margin-bottom: calc(11px - #{rpx(2)});
  //background-color: #ccc;
  background: url('./images/box.png') center no-repeat;
  background-size: 100% 100%;
  //height: 30vh;
  height: calc(30vh - #{rpx(2)});
}
.box1 {
  //margin-bottom: -10.5px;
  margin-bottom: calc(-10.5px + #{rpx(10)});
  //background-color: #ccc;
  background: url('./images/box.png') center no-repeat;
  background-size: 100% 100%;
  //height: 30vh;
  height: calc(30vh - #{rpx(2)});
}
.bigger {
  background: url('./images/1.png') center no-repeat;
  background-size: 100% 100%;
  height: 58.5vh;
  width:100%;

  margin: 8% auto;
}
/* 旋转动画 */
.animate {
  width: 38%;
  height: 8.575rem;
  margin: 8% auto;
  opacity: 1;
  border-radius: 50%;
  background: url('./images/r_ellipse.png') center no-repeat;
  background-size: 100% 100%;
  position: absolute;
//   border:1px solid seagreen;
//   left: 33%;
  top: 19%;
}
@keyframes animX {
  0% {
    left: -2rem;
  }
  100% {
    left: 40rem;
  }
}

@keyframes animY {
  0% {
    top: -4rem;
    opacity: 0.2
  }
  100% {
    top: 4rem;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.5);
    transition: all 2s;
  }
  50% {
    transform: scale(1.0);
    transition: all 2s;
  }
  100% {
    transform: scale(0.5);
    transition: all 2s;
  }
}
.ball {
  width: 4rem;
  height: 2.675rem;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.3rem;

  li{
    position: absolute;
    list-style: none; // 去掉li的黑点
    z-index: 99;

    .tip{
      position: absolute;
      border-radius: 10px;
      border: solid 1px #44b3ff;
      background-color: rgb(68, 179, 255, 0.4);
      color: #fff;
      top: -180px;
      left: -20px;
      width: 220px;
      padding: 5px;
      font-size: 16px;
      .num{
        font-size: 30px;
        font-weight: bold;
        font-family: electronicFont;
        letter-spacing: 2px; // 修改字符之间的间距
      }
    }
    p {
      position: absolute;
      color: white;
      font-size: 16px;
      top: 18px;
      left: 40px;
    }
    /* 4个图x和y轴动画加起来是20s , 20s/4 等于 5s
    每个球y轴动画延迟 从0递减5s,x轴与y轴相差动画时长的一半（10s/2） */
    &:nth-child(1){
      animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate,
      animY 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
      scale 20s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
    }
    &:nth-child(2){
      animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
      animY 10s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate,
      scale 20s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate;
    }
    &:nth-child(3){
      animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
      animY 10s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
      scale 20s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
    }
    &:nth-child(4){
      animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate,
      animY 10s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
      scale 20s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate;
    }
  }
}

.ball:hover li{
  transform: scale(1.2);
  cursor: pointer;
  animation-play-state: paused;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.num {
        color: cornflowerblue;
        font-size: 1.125rem;
        vertical-align: middle;
        padding: 0 0.9375rem;
        font-weight: bold;
      }
</style>