<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>3D Sunstance (Substantial) cube</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { margin: 0; padding: 0; box-sizing: border-box; width: 100%; height: 100vh; background: #606060; /* 视角，必须开视角才可以看到旋转位移的3D属性 */ perspective: 500px; overflow: hidden; } .main { position: relative; width: 200px; height: 200px; margin: 0 auto; margin-top: 200px; /* 必须声明 transform-style:preserve-3d 才可以展示3D属性的变化 因为其默认 2d ,transform-style:flat */ transform-style:preserve-3d; animation:run 10s infinite; } .box { width: 200px; height: 200px; background-color: #f9bf3b; display: grid; place-items: center; font-size: 50px; position: absolute; opacity: 0.6; } .box:first-child { transform: rotateY(90deg) translateZ(100px); } .box:nth-child(2) { transform: rotateY(-90deg) translateZ(100px); background-color: #8e44ad; } .box:nth-child(3) { transform: rotateX(90deg) translateZ(100px); background-color: #22a7f0; } .box:nth-child(4) { transform: rotateX(-90deg) translateZ(100px); background-color: #ffa27b; } .box:nth-child(5) { transform: rotateX(180deg) translateZ(100px); background-color: #e74c3c; z-index: -1; } .box:nth-child(6) { transform: rotateY(0deg) translateZ(100px); background-color: #ecf0f1; } @keyframes run { 0% { transform: rotateY(0); } 10% { transform: rotateY(180deg); } 20% { transform: rotateX(180deg); /* transform: rotateY(180deg); */ } } </style> </head> <body> <div class="main"> <div class="box">右</div> <div class="box">左</div> <div class="box">上</div> <div class="box">下</div> <div class="box">后</div> <div class="box">前</div> </div> </body> </html>