rotate旋转

效果代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/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 classcontainer div classcontent div classplane/div div classcard card0/div div classcard card1/div div classcard card2/div div classcard card3/div div classcard 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