近期，在做一个大屏项目，有个需求场景：几个小球需要围绕着一个圆环进行旋转，点击某个小球旋转到指定小球的位置，需要营造出三维空间立体的效果。
实现步骤：
首先，通过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 } = thisswitch(active){case 1:this.rotate = 220break;case 2:this.rotate = 310break;case 3:this.rotate = 130break;case 4:this.rotate = 50}this.current = activeelWrap.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>
