<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ background-color: skyblue; } .main{ width: 700px; height: 700px; margin: 0 auto; border: 1px solid #FFCCCC; } #dice{ width: 300px; height: 300px; /*background: #0bd;*/ margin: 200px auto; position: relative; transform-style: preserve-3d; animation: run 5s infinite linear; } .wall{ width: 300px; height: 300px; position: absolute; display: flex; background: rgba(255,255,255,1); border: 1px solid #000; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .dot{ width: 50px; height: 50px; background: #000; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } #one{ justify-content: center; align-items: center; -webkit-transform: translateZ(150px); -moz-transform: translateZ(150px); -ms-transform: translateZ(150px); -o-transform: translateZ(150px); transform: translateZ(150px); } #one .dot{ width: 100px; height: 100px; } #two{ flex-direction: column; justify-content: space-around; align-items: center; -webkit-transform: rotateY(90deg) translateZ(150px); -moz-transform: rotateY(90deg) translateZ(150px); -ms-transform: rotateY(90deg) translateZ(150px); -o-transform: rotateY(90deg) translateZ(150px); transform: rotateY(90deg) translateZ(150px); } #two .dot{ width: 100px; height: 100px; } #three{ -webkit-transform: translateZ(-150px); -moz-transform: translateZ(-150px); -ms-transform: translateZ(-150px); -o-transform: translateZ(-150px); transform: translateZ(-150px); } #three .d{ width: 300px; height: 300px; transform-style: preserve-3d; -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); transform: rotateZ(45deg); display: flex; justify-content: space-around; align-items: center; } #four{ -webkit-transform: rotateY(90deg) translateZ(-150px); -moz-transform: rotateY(90deg) translateZ(-150px); -ms-transform: rotateY(90deg) translateZ(-150px); -o-transform: rotateY(90deg) translateZ(-150px); transform: rotateY(90deg) translateZ(-150px); } #four .up, #four .down{ margin-top: 75px; display: flex; width: 150px; height: 150px; flex-direction: column; justify-content: space-between; align-items: center; } #five{ justify-content: center; align-items: center; -webkit-transform: rotateX(90deg) translateZ(150px); -moz-transform: rotateX(90deg) translateZ(150px); -ms-transform: rotateX(90deg) translateZ(150px); -o-transform: rotateX(90deg) translateZ(150px); transform: rotateX(90deg) translateZ(150px); } #five .up, #five .down{ display: flex; width: 120px; height: 150px; flex-direction: column; justify-content: space-between; align-items: center; } #six{ -webkit-transform: rotateX(90deg) translateZ(-150px); -moz-transform: rotateX(90deg) translateZ(-150px); -ms-transform: rotateX(90deg) translateZ(-150px); -o-transform: rotateX(90deg) translateZ(-150px); transform: rotateX(90deg) translateZ(-150px); } #six .up, #six .down{ display: flex; width: 150px; height: 300px; flex-direction: column; justify-content: space-around; align-items: center; } @keyframes run{ from{ transform: rotateX(0deg) rotateY(0deg); } to{ transform: rotateX(360deg) rotateY(360deg); } } </style> </head> <body> <div class="main"> <div id="dice"> <div id="one" class="wall"> <div class="dot"></div> </div> <div id="two" class="wall"> <div class="dot"></div> <div class="dot"></div> </div> <div id="three" class="wall"> <div class="d"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <div id="four" class="wall"> <div class="up"> <div class="dot"></div> <div class="dot"></div> </div> <div class="down"> <div class="dot"></div> <div class="dot"></div> </div> </div> <div id="five" class="wall"> <div class="up"> <div class="dot"></div> <div class="dot"></div> </div> <div class="dot"></div> <div class="down"> <div class="dot"></div> <div class="dot"></div> </div> </div> <div id="six" class="wall"> <div class="up"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> <div class="down"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> </div> </div> </body> </html>
注意：在transform属性中属性值的顺序会直接影响到效果的出现；