1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 #div{ 9 width: 900px; 10 height: 900px; 11 border: 0px solid green; 12 } 13 #box { 14 width: 1000px; 15 height: 1000px; 16 border: 0px solid green; 17 transform-style: preserve-3d; 18 position: absolute; 19 animation: spinCube 15s linear infinite alternate; 20 } 21 22 23 #box div { 24 width: 200px; 25 height: 200px; 26 position: absolute; 27 top: 600px; 28 left: 600px; 29 opacity: 0.7; 30 color: white; 31 text-align: center; 32 font-size: 150px; 33 font-weight: 600; 34 } 35 36 @keyframes spinCube { 37 0% { 38 transform: rotateX( 0deg) rotateY( 0deg); 39 } 40 100% { 41 transform: rotateX( 90deg) rotateY( 360deg); 42 } 43 } 44 /*参考面 正面*/ 45 46 .d1 { 47 background: red; 48 } 49 /*底部*/ 50 51 .d2 { 52 transform: rotateX(90deg); 53 background: yellow; 54 transform-origin: bottom; 55 } 56 /*顶部*/ 57 58 .d3 { 59 transform: rotateX(90deg) translateY(-200px); 60 background: green; 61 transform-origin: top; 62 } 63 /*左边*/ 64 65 .d4 { 66 transform: rotateY(90deg); 67 background: blue; 68 transform-origin: left; 69 } 70 /*右边*/ 71 72 .d5 { 73 transform: rotateY(-90deg); 74 background: black; 75 transform-origin: right; 76 } 77 /*背面*/ 78 79 .d6 { 80 transform: translateZ(-200px); 81 background: gray; 82 } 83 </style> 84 </head> 85 86 <body> 87 <div id="div"> 88 <div id="box"> 89 <div class="d1">1</div> 90 <div class="d2">2</div> 91 <div class="d3">3</div> 92 <div class="d4">4</div> 93 <div class="d5">5</div> 94 <div class="d6">6</div> 95 </div> 96 </div> 97 </body> 98 99 </html>