立体骰子（css3和js） - 柿子橙_H5之家 - 中国HTML5教程资源分享第一站

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src='jquery-3.0.0.min.js'></script> <style> body{ perspective: 500px; background-color: skyblue; } #demo { width: 200px; height: 200px; margin: 100px auto; position: relative; transform-style: preserve-3d; transition: all 5s; } #demo .item{ width: 100%; height: 100%; list-style: none; position: absolute; padding: 0; margin: 0; display: flex; border-radius: 30px; background-color: whitesmoke; } li{ width: 30px; height: 30px; border-radius: 50%; background-color: red; margin: 5px; } .item:nth-child(1){ align-items: center; justify-content: center; transform: rotateY(0deg) translateZ(100px); } .item:nth-child(1) li{ width: 50px; height: 50px; } .item:nth-child(2){ justify-content: space-between; transform: rotateY(180deg) translateZ(100px); } .item:nth-child(2) li{ width: 40px; height: 40px; } .item:nth-child(2) li:nth-child(2){ align-self: flex-end; } .item:nth-child(3){ justify-content: space-between; transform: rotateY(90deg) translateZ(100px); } .item:nth-child(3) li{ width: 35px; height: 35px; } .item:nth-child(3) li:nth-child(3){ align-self: flex-end; } .item:nth-child(3) li:nth-child(2){ align-self: center; justify-content: center; } .item:nth-child(4) { justify-content: space-between; flex-wrap: wrap; align-content: space-between; transform: rotateY(-90deg) translateZ(100px); } .item:nth-child(4) li{ width: 35px; height: 35px; margin: 20px; } .item:nth-child(5){ justify-content: space-between; flex-wrap: wrap; align-content: space-between; transform: rotateX(90deg) translateZ(100px); } .item:nth-child(5) li{ margin: 8px 15px; } .item:nth-child(5) li:nth-child(2){ margin-top: 85px; } .item:nth-child(6){ flex-wrap: wrap; flex-direction: column; justify-content: space-between; align-content: space-between; transform: rotateX(-90deg) translateZ(100px); } .item:nth-child(6) li{ margin: 18px 20px; } input{ display: block; width: 50px; height: 40px; margin: 0 auto; } </style> <script> $(function () { $("#btn").click(function () { var x = parseInt(Math.random()*3600); var y = parseInt(Math.random()*3600); $("#demo").css({ transform:'rotateX('+x+'deg) rotateY('+y+'deg)'}) }) }) </script> </head> <body> <div> <ul> <li></li> </ul> <ul> <li></li> <li></li> </ul> <ul> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <input type="button" value="开始"/> </body> </html>