css 实现三维立体旋转效果

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

实现步骤：

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

创建一个ring.vue

效果图：

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

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

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

我们给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属性，这时，我们小球与圆环已经可以正常旋转到指定的角度了，搞定~

完整代码如下：