css 实现三维立体旋转效果

近期，在做一个大屏项目，有个需求场景：几个小球需要围绕着一个圆环进行旋转，点击某个小球旋转到指定小球的位置，需要营造出三维空间立体的效果。

实现步骤：

首先，通过css绘制一个大圆与几个小圆，代码如下：

创建一个ring.vue

<template>
    <div class="wrap">
      <div class="ball">1</div>
      <div class="ball two">2</div>
      <div class="ball three">3</div>
      <div class="ball four">4</div>
    </div>
</template>

<script>
export default {
}
</script>

<style scoped>
.wrap{
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 2px solid rgb(0, 255, 191);
  position: relative;
  margin: 200px auto;
}
.ball{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgb(43, 144, 226,0.5);
  position: absolute;
  top: -25px;
  left: calc(50% - 25px);
  text-align: center;
  line-height: 50px;
  color: white;
}
.two {
  top: calc(50% - 25px);
  left: -25px;
}
.three {
  top: calc(50% - 25px);
  left: 375px;
}
.four{
  top: 375px;
}
</style>

效果图：

好了，到此，大功告成！！！记得点赞加关注。

开个玩笑~~~，轻一点！！！

我们给圆环添加立体效果，关键代码如下：

我们给wrap添加上transform：

.wrap{
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 2px solid rgb(0, 255, 191);
  position: relative;
  margin: 200px auto;
  transform: scaleY(0.64) rotateZ(-45deg);
}

再给ball添加 transform：

.ball{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgb(43, 144, 226,0.5);
  position: absolute;
  top: -25px;
  left: calc(50% - 25px);
  text-align: center;
  line-height: 50px;
  color: white;
  transform: rotateZ(45deg) scaleY(1.5);
}

接着，为了使圆环可以旋转，我们给小圆添加点击事件：

  

 我们动态的为圆环与小球设置了transform属性，这时，我们小球与圆环已经可以正常旋转到指定的角度了，搞定~

完整代码如下：

<template>
    <div class="wrap">
      <div class="ball" @click="clickiHandle(1)">1</div>
      <div class="ball two" @click="clickiHandle(2)">2</div>
      <div class="ball three" @click="clickiHandle(3)">3</div>
      <div class="ball four" @click="clickiHandle(4)">4</div>
    </div>
</template>

<script>
export default {
  data(){
    return {
      // 以2号球为起点
      current: 2,
      // 当前圆环旋转角度
      rotate: 0,
      elBalls: null,
      elWrap: null
    }
  },
  mounted(){
    this.elBalls = document.querySelectorAll('.ball')
    this.elWrap = document.querySelector('.wrap')
  },
  methods: {
    clickiHandle(active){
      const { elBalls,elWrap } = this
      switch(active){
        case 1:
          this.rotate = 220
          break;
        case 2:
          this.rotate = 310
          break;
        case 3:
          this.rotate = 130
          break;
        case 4:
          this.rotate = 50
      }
      this.current = active
      elWrap.style.transform = `scaleY(0.64) rotate(${this.rotate}deg)`;
      elBalls.forEach(ball => {
        ball.style.transform = `rotate(-${this.rotate}deg) scaleY(1.5)`;
      })
      this.$emit('update:current',active)
    }
  }
}
</script>

<style scoped>
.wrap{
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 2px solid rgb(0, 255, 191);
  position: relative;
  margin: 200px auto;
  transform: scaleY(0.64) rotateZ(-45deg);
  transition-duration: 4s;
}
.ball{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgb(43, 144, 226,0.5);
  position: absolute;
  top: -25px;
  left: calc(50% - 25px);
  text-align: center;
  line-height: 50px;
  color: white;
  transform: rotateZ(45deg) scaleY(1.5);
  cursor: pointer;
  transition-duration: 4s;
}
.two {
  top: calc(50% - 25px);
  left: -25px;
}
.three {
  top: calc(50% - 25px);
  left: 375px;
}
.four{
  top: 375px;
}
</style>