rotate旋转
效果：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .plane { position: absolute; } .card { height: 100px; width: 70px; border-radius: 10px; position: absolute; } .content { height: 500px; width: 800px; border: 1px solid green; position: absolute; display: flex; justify-content: center; align-items: center; transform: rotateX(-10deg); transform-style: preserve-3d; perspective: 1800px; } .container { height: 600px; transform-style: preserve-3d; width: 900px; perspective: 800px; border: 1px solid red; position: relative; display: flex; justify-content: center; align-items: center; } </style> </head> <body> <div class="container"> <div class="content"> <div class="plane"></div> <div class="card card0"></div> <div class="card card1"></div> <div class="card card2"></div> <div class="card card3"></div> <div class="card card4"></div> </div> </div> <script> const cards = [...document.getElementsByClassName("card")]; const radius = 300 cards.forEach(div => { div.style.backgroundColor = `#${Math.random().toString(16).slice(2,8)}` }) function setPosition(startAngle) { startAngle = startAngle / 180 * Math.PI const count = cards.length const angleDelta = Math.PI * 2 / count const angleArray = new Array(count).fill(0).map((_, index) => { return startAngle + index * angleDelta }) console.log(angleArray); cards.forEach((card,index) => { const transform = angleToCss(angleArray[index]) console.log(transform); card.style.transform = transform }) } function angleToCss(angle) { console.log(angle); angle = angle % (Math.PI * 2) if(angle < 0) { angle += Math.PI * 2 } const x = radius * Math.sin(angle) const z = radius * Math.cos(angle) return `translateX(${x}px) translateZ(${z}px)` } let count = 0 setInterval(()=>{ setPosition(count) count += 1 }, 50) </script> </body> </html>