CSS+JS实现随机大小骰子

  1     <style>
  2         * {
  3             margin: 0;
  4             padding: 0
  5         }
  6         :root{
  7             background: #666;
  8         }
  9 
 10         #content {
 11             /* display: flex; */
 12             /* width: 1200px; */
 13             /* height: 200px; */
 14             width: 134px;
 15             height: 134px;
 16             /* justify-content: space-around; */
 17             /* align-items: center; */
 18             /* margin: 20px auto; */
 19             transform-style: preserve-3d;
 20             transform:  rotateY(30deg) rotateX(-20deg);
 21 
 22             /* transition: all 2s 5s; */
 23             position: absolute;
 24             left:0;
 25             top: 0;
 26             right: 0;
 27             bottom: 0;
 28             margin: auto;
 29         }
 30 
 31         /* #content:hover{
 32             transform: rotateY(360deg) rotateX(20deg)
 33         }         */
 34 
 35         @keyframes move1{
 36             0%{transform:  rotateY(30deg) rotateX(-20deg);}
 37             20%{transform: rotateY(3600deg) rotateX(3600deg)}
 38             90%{transform: rotateY(3600deg) rotateX(3600deg)}
 39             100%{transform:  rotateY(30deg) rotateX(-20deg);}
 40         }
 41         @keyframes move2{
 42             0%{transform:  rotateY(30deg) rotateX(-20deg);}
 43             20%{transform: rotateY(3510deg) rotateX(3600deg)}
 44             90%{transform: rotateY(3510deg) rotateX(3600deg)}
 45             100%{transform:  rotateY(30deg) rotateX(-20deg);}
 46         }
 47         @keyframes move3{
 48             0%{transform:  rotateY(30deg) rotateX(-20deg);}
 49             20%{transform: rotateY(3690deg) rotateX(3600deg)}
 50             90%{transform: rotateY(3690deg) rotateX(3600deg)}
 51             100%{transform:  rotateY(30deg) rotateX(-20deg);}
 52         }
 53         @keyframes move4{
 54             0%{transform:  rotateY(30deg) rotateX(-20deg);}
 55             20%{transform: rotateY(3780deg) rotateX(3600deg)}
 56             90%{transform: rotateY(3780deg) rotateX(3600deg)}
 57             100%{transform:  rotateY(30deg) rotateX(-20deg);}
 58         }
 59         @keyframes move5{
 60             0%{transform:  rotateY(30deg) rotateX(-20deg);}
 61             20%{transform: rotateY(3600deg) rotateX(3690deg)}
 62             90%{transform: rotateY(3600deg) rotateX(3690deg)}
 63             100%{transform:  rotateY(30deg) rotateX(-20deg);}
 64         }
 65         @keyframes move6{
 66             0%{transform:  rotateY(30deg) rotateX(-20deg);}
 67             20%{transform: rotateY(3600deg) rotateX(3510deg)}
 68             90%{transform: rotateY(3600deg) rotateX(3510deg)}
 69             100%{transform:  rotateY(30deg) rotateX(-20deg);}
 70         }
 71 
 72         #content>div{
 73             width: 100px;
 74             height: 100px;
 75             padding: 15px;
 76             display: flex;
 77             background: #fff;
 78             border-radius: 15px;
 79             position: absolute;
 80             /* box-shadow: 2px 1px 5px #333; */
 81             border: 2px solid #eee;
 82         }     
 83 
 84         #content span{
 85             width: 25px;
 86             height: 25px;
 87             display: block;
 88             border-radius: 50%;
 89             background: #c33;
 90         }
　　　　　　　　//筛子布局           
 91         /* 1 */
 92         #content>div:nth-child(1){
 93             justify-content: center;
 94             align-items: center;
 95             transform: translateZ(65px)
 96         }
 97 
 98         /* 2 */
 99         #content>div:nth-child(2){
100             justify-content: space-between;
101             align-items: center;
102             transform: translateZ(-65px)
103         }
104         /* 3 */
105         #content>div:nth-child(3){
106             justify-content: space-between;
107             transform: rotateX(90deg) translateZ(65px)
108         }
109 
110         #content>div:nth-child(3) span:nth-child(2){
111             align-self: center;
112         }     
113         
114         #content>div:nth-child(3) span:nth-child(3){
115             align-self: flex-end;
116         }    
117         /* 4 */
118         #content>div:nth-child(4){
119             transform: rotateX(90deg) translateZ(-65px);
120             justify-content: space-between;
121         }
122 
123         #content>div:nth-child(4) div{
124             display: flex;
125             flex-direction: column;
126             justify-content: space-between;
127         }
128         /* 5 */
129         #content>div:nth-child(5){
130             transform: rotateY(90deg) translateZ(65px);
131             justify-content: space-between;
132         }
133 
134         #content>div:nth-child(5) div{
135             display: flex;
136             flex-direction: column;
137             justify-content: space-between;
138         }        
139 
140         #content>div:nth-child(5) div:nth-child(2){
141             justify-content: center;
142         }
143         /* 6 */
144         #content>div:nth-child(6){
145             transform: rotateY(90deg) translateZ(-65px);
146             justify-content: space-between;
147         }
148 
149         #content>div:nth-child(6) div{
150             display: flex;
151             flex-direction: column;
152             justify-content: space-between;
153         }        
154 
155     </style>

 1 <body>
 2     <div id="content">
 3         <!-- 第一个筛子 -->
 4         <div>
 5             <span></span>
 6         </div>
 7 
 8         <!-- 第二个筛子 -->
 9         <div>
10             <span></span>
11             <span></span>
12         </div>
13 
14         <!-- 第三个筛子 -->
15         <div>
16             <span></span>
17             <span></span>
18             <span></span>
19         </div>
20 
21         <!-- 第四个 -->
22 
23         <div>
24             <div>
25                 <span></span>
26                 <span></span>
27             </div>
28             <div>
29                 <span></span>
30                 <span></span>
31             </div>
32         </div>
33         <!-- 第五个 -->
34         <div>
35             <div>
36                 <span></span>
37                 <span></span>
38             </div>
39             <div>
40                 <span></span>
41             </div>
42             <div>
43                 <span></span>
44                 <span></span>
45             </div>
46         </div>
47 　　　　　<!-- 第六个-->
48         <div>
49             <div>
50                 <span></span>
51                 <span></span>
52                 <span></span>
53             </div>
54             <div>
55                 <span></span>
56                 <span></span>
57                 <span></span>
58             </div>
59         </div>
60     </div>
61 </body>

1     $("#content").click(function(){
2         var num = parseInt(1+Math.random()*6)
3         $("#content").css("animation","move"+num+" 5s ease-in-out 1")