效果图

3D骰子.gif

代码

直接上代码：

<!DOCTYPE html>
<html lang="en">
 <head>
 <title>demo03</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
 *{
 margin: 0px;
 padding: 0px;
 /* opacity: .8;   // 不能在这里设置透明度啊～～ */
 }
 body{
 background-color: black;
 }
 ul#list{
 width: 150px;
 height: 150px;

 list-style: none;
 position: relative;

 margin: 100px auto;

 transition: 6s;
 transform-style: preserve-3d;
 }

 ul#list:hover{
 transform: rotateX(450deg) rotateY(450deg);
 }

 ul#list li{
 width: 100%;
 height: 100%;
 background-color: snow;
 border-radius: 4px;
 opacity: .6;
 box-sizing: border-box;
 padding: 15px;
 position: absolute;
 top: 0px;

 display: flex;
 }

 /* 设置点数的样式 */
 span{
 width: 35px;
 height: 35px;
 border-radius: 40px;
 background-color: snow;
 box-shadow: 0px 0px 20px rgba(125, 125, 125, .8)
 }

 ul#list li:nth-child(1){
 background-color: skyblue;
 transform: rotateX(0deg) translateZ(75px);

 justify-content: center;
 align-items: center;
 }

 ul#list li:nth-child(2){
 background-color: salmon;

 transform: rotateX(-90deg) translateZ(75px);

 justify-content: space-between;
 }
 ul#list li:nth-child(2) span:nth-child(2){
 align-self: flex-end;
 }

 ul#list li:nth-child(3){
 background-color: sandybrown;

 transform: rotateX(-180deg) translateZ(75px);

 justify-content: space-between;
 }
 ul#list li:nth-child(3) span:nth-child(2){
 align-self: center;
 }
 ul#list li:nth-child(3) span:nth-child(3){
 align-self: flex-end;
 }

 ul#list li:nth-child(4){
 background-color: fuchsia;

 transform: rotateX(90deg) translateZ(75px);

 flex-wrap: wrap;
 }
 ul#list li:nth-child(4) div{
 flex-basis: 100%;
 display: flex;

 justify-content: space-between;
 align-self: center;
 }

 ul#list li:nth-child(5){
 background-color: aquamarine;

 transform: rotateY(90deg) translateZ(75px);

 display: flex;
 flex-direction: column;
 }
 ul#list li:nth-child(5) div{
 flex-basis: 100%;
 display: flex;
 }
 ul#list li:nth-child(5) div:nth-child(1){
 justify-content: space-between;
 }
 ul#list li:nth-child(5) div:nth-child(2){
 justify-content:center;
 }
 ul#list li:nth-child(5) div:nth-child(3){
 justify-content: space-between;
 }

 ul#list li:nth-child(6){
 background-color: firebrick;

 transform: rotateY(-90deg) translateZ(75px);

 display: flex;
 flex-wrap: wrap;
 }
 ul#list li:nth-child(6) div{
 flex-basis: 100%;
 display: flex;
 justify-content: space-between;
 }
 ul#list li:nth-child(6) div:nth-child(2){
 align-self: center;
 }
 ul#list li:nth-child(6) div:nth-child(3){
 align-self: flex-end;
 }
 </style>
 </head>
 <body>
 <ul id="list">
 <li>
 <span></span>
 </li>
 <li>
 <span></span>
 <span></span>
 </li>
 <li>
 <span></span>
 <span></span>
 <span></span>
 </li>
 <li>
 <div>
 <span></span>
 <span></span>
 </div>
 <div>
 <span></span>
 <span></span>
 </div>
 </li>
 <li>
 <div>
 <span></span>
 <span></span>
 </div>
 <div>
 <span></span>
 </div>
 <div>
 <span></span>
 <span></span>
 </div>
 </li>
 <li>
 <div>
 <span></span>
 <span></span>
 <span></span>
 </div>
 <div>
 <span></span>
 <span></span>
 <span></span>
 </div>
 <div>
 <span></span>
 <span></span>
 <span></span>
 </div>
 </li>
 </ul>
 </body>
</html></pre>