近期，在做一個大屏項目，有個需求場景：幾個小球需要圍繞著一個圓環進行旋轉，點擊某個小球旋轉到指定小球的位置，需要營造出三維空間立體的效果。

實現步驟：

首先，通過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>

總結

以上是生活随笔為你收集整理的css 实现三维立体旋转效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。