1 
 2<div class="card">
 3  <input type="checkbox" id="rollToggle" class="roll-toggle" />
 4  <div class="result">8</div>
 5  <div class="dice-area">
 6    <div class="dice dice1">
 7      <div class="face front" data-value="1">
 8        <div class="dots"><span></span></div>
 9      </div>
10      <div class="face back" data-value="2">
11        <div class="dots"><span></span><span></span></div>
12      </div>
13      <div class="face right" data-value="3">
14        <div class="dots"><span></span><span></span><span></span></div>
15      </div>
16      <div class="face left" data-value="4">
17        <div class="dots">
18          <span></span><span></span><span></span><span></span>
19        </div>
20      </div>
21      <div class="face top" data-value="5">
22        <div class="dots">
23          <span></span><span></span><span></span><span></span><span></span>
24        </div>
25      </div>
26      <div class="face bottom" data-value="6">
27        <div class="dots">
28          <span></span><span></span><span></span><span></span><span></span
29          ><span></span>
30        </div>
31      </div>
32    </div>
33    <div class="dice dice2">
34      <div class="face front" data-value="1">
35        <div class="dots"><span></span></div>
36      </div>
37      <div class="face back" data-value="2">
38        <div class="dots"><span></span><span></span></div>
39      </div>
40      <div class="face right" data-value="3">
41        <div class="dots"><span></span><span></span><span></span></div>
42      </div>
43      <div class="face left" data-value="4">
44        <div class="dots">
45          <span></span><span></span><span></span><span></span>
46        </div>
47      </div>
48      <div class="face top" data-value="5">
49        <div class="dots">
50          <span></span><span></span><span></span><span></span><span></span>
51        </div>
52      </div>
53      <div class="face bottom" data-value="6">
54        <div class="dots">
55          <span></span><span></span><span></span><span></span><span></span
56          ><span></span>
57        </div>
58      </div>
59    </div>
60  </div>
61  <div class="controls">
62    <label for="rollToggle" class="btn"
63      ><span class="btn-text">ROLL</span
64      ><span class="btn-text-stop">STOP</span></label
65    >
66  </div>
67</div>          

  1 
  2.card * {
  3  margin: 0;
  4  padding: 0;
  5  box-sizing: border-box;
  6}
  7 
  8.roll-toggle {
  9  display: none;
 10}
 11 
 12.card {
 13  position: relative;
 14  display: flex;
 15  flex-direction: column;
 16  align-items: center;
 17  gap: 40px;
 18  transform-style: preserve-3d;
 19  z-index: 1;
 20}
 21 
 22.result {
 23  position: absolute;
 24  top: calc(50% + 90px);
 25  left: 50%;
 26  transform: translateX(-50%) translateY(0) scale(0);
 27  font-size: 60px;
 28  font-weight: 900;
 29  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 30  color: #000;
 31  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 32  opacity: 0;
 33  z-index: 100;
 34  pointer-events: none;
 35  letter-spacing: 4px;
 36}
 37 
 38.roll-toggle:not(:checked) ~ .result {
 39  animation: fall-number 2.5s cubic-bezier(0.4, 0, 0.6, 1) 0.8s forwards;
 40}
 41 
 42@keyframes fall-number {
 43  0% {
 44    transform: translateX(-50%) translateY(-30px) scale(0);
 45    opacity: 0;
 46  }
 47  15% {
 48    transform: translateX(-50%) translateY(0) scale(1.1);
 49    opacity: 1;
 50  }
 51  25%,
 52  45% {
 53    transform: translateX(-50%) translateY(0) scale(1);
 54    opacity: 1;
 55  }
 56  100% {
 57    transform: translateX(-50%) translateY(200px) scale(0.6);
 58    opacity: 0;
 59  }
 60}
 61 
 62.dice-area {
 63  display: flex;
 64  gap: 60px;
 65  transform-style: preserve-3d;
 66  z-index: 10;
 67  position: relative;
 68}
 69 
 70.dice-area::before {
 71  content: "";
 72  position: absolute;
 73  bottom: -35px;
 74  left: 50%;
 75  transform: translateX(-50%);
 76  width: 360px;
 77  height: 35px;
 78  background: radial-gradient(
 79    ellipse at center,
 80    rgba(0, 0, 0, 0.3) 0%,
 81    rgba(0, 0, 0, 0.2) 20%,
 82    rgba(0, 0, 0, 0.12) 40%,
 83    rgba(0, 0, 0, 0.06) 60%,
 84    transparent 80%
 85  );
 86  border-radius: 50%;
 87  filter: blur(15px);
 88}
 89 
 90.dice-area::after {
 91  content: "";
 92  position: absolute;
 93  bottom: -12px;
 94  left: 50%;
 95  transform: translateX(-50%);
 96  width: 320px;
 97  height: 50px;
 98  background: radial-gradient(
 99    ellipse at center,
100    rgba(0, 0, 0, 0.15) 0%,
101    rgba(0, 0, 0, 0.1) 35%,
102    rgba(0, 0, 0, 0.05) 60%,
103    transparent 80%
104  );
105  border-radius: 50%;
106  filter: blur(20px);
107}
108 
109.dice {
110  width: 90px;
111  height: 90px;
112  position: relative;
113  transform-style: preserve-3d;
114  transform: rotateX(-25deg) rotateY(-15deg);
115  animation: float 8s ease-in-out infinite;
116}
117 
118.dice2 {
119  animation-delay: 4s;
120}
121 
122@keyframes float {
123  0%,
124  100% {
125    transform: rotateX(-35deg) rotateY(-45deg) translateY(0);
126  }
127  25% {
128    transform: rotateX(-25deg) rotateY(25deg) translateY(-20px);
129  }
130  50% {
131    transform: rotateX(-45deg) rotateY(55deg) translateY(0);
132  }
133  75% {
134    transform: rotateX(-30deg) rotateY(-25deg) translateY(-20px);
135  }
136}
137 
138.roll-toggle:checked ~ .dice-area .dice {
139  animation: roll 1.2s linear infinite !important;
140}
141 
142.roll-toggle:checked ~ .dice-area .dice2 {
143  animation: roll 1s linear infinite !important;
144}
145 
146@keyframes roll {
147  to {
148    transform: rotateX(360deg) rotateY(360deg);
149  }
150}
151 
152.roll-toggle:not(:checked) ~ .dice-area .dice1 {
153  animation:
154    float 8s ease-in-out infinite,
155    stop-at-5 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
156}
157 
158.roll-toggle:not(:checked) ~ .dice-area .dice2 {
159  animation:
160    float 8s ease-in-out 4s infinite,
161    stop-at-3 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
162}
163 
164@keyframes stop-at-5 {
165  to {
166    transform: rotateX(-70deg) rotateY(-15deg);
167  }
168}
169 
170@keyframes stop-at-3 {
171  to {
172    transform: rotateX(-25deg) rotateY(-105deg);
173  }
174}
175 
176.face {
177  position: absolute;
178  width: 90px;
179  height: 90px;
180  background: linear-gradient(145deg, #fff 0%, #f8f8f8 50%, #f2f2f2 100%);
181  border: 1px solid rgba(0, 0, 0, 0.2);
182  border-radius: 8px;
183  backface-visibility: hidden;
184  transform-style: preserve-3d;
185  display: flex;
186  align-items: center;
187  justify-content: center;
188  box-shadow:
189    inset 3px 3px 8px rgba(0, 0, 0, 0.08),
190    inset -3px -3px 8px rgba(0, 0, 0, 0.08),
191    0 2px 8px rgba(0, 0, 0, 0.2);
192}
193 
194.face::before {
195  content: "";
196  position: absolute;
197  inset: 1px;
198  background: linear-gradient(
199    135deg,
200    rgba(255, 255, 255, 0.4) 0%,
201    transparent 50%
202  );
203  border-radius: 7px;
204  pointer-events: none;
205}
206 
207.front {
208  transform: rotateY(0deg) translateZ(45px);
209}
210 
211.back {
212  transform: rotateY(180deg) translateZ(45px);
213}
214 
215.right {
216  transform: rotateY(90deg) translateZ(45px);
217}
218 
219.left {
220  transform: rotateY(-90deg) translateZ(45px);
221}
222 
223.top {
224  transform: rotateX(90deg) translateZ(45px);
225}
226 
227.bottom {
228  transform: rotateX(-90deg) translateZ(45px);
229}
230 
231.dots {
232  display: grid;
233  padding: 15px;
234  gap: 15px;
235  width: 100%;
236  height: 100%;
237  position: relative;
238  z-index: 1;
239}
240 
241.face[data-value="1"] .dots {
242  grid-template: 1fr / 1fr;
243  place-items: center;
244}
245 
246.face[data-value="2"] .dots {
247  grid-template: 1fr 1fr / 1fr;
248  place-items: center;
249}
250 
251.face[data-value="3"] .dots {
252  grid-template: 1fr 1fr 1fr / 1fr;
253  place-items: center;
254}
255 
256.face[data-value="4"] .dots {
257  grid-template: 1fr 1fr / 1fr 1fr;
258}
259 
260.face[data-value="5"] .dots {
261  grid-template: 1fr 1fr 1fr / 1fr 1fr;
262}
263 
264.face[data-value="6"] .dots {
265  grid-template: 1fr 1fr 1fr / 1fr 1fr;
266}
267 
268.face[data-value="5"] .dots span:nth-child(3) {
269  grid-column: 1 / -1;
270  justify-self: center;
271}
272 
273.dots span {
274  width: 12px;
275  height: 12px;
276  background: radial-gradient(
277    circle at 40% 40%,
278    rgba(40, 40, 40, 1) 0%,
279    rgba(0, 0, 0, 1) 100%
280  );
281  border-radius: 50%;
282  box-shadow:
283    inset 1px 1px 3px rgba(0, 0, 0, 0.8),
284    inset -1px -1px 2px rgba(255, 255, 255, 0.1),
285    0 1px 2px rgba(0, 0, 0, 0.3);
286}
287 
288.controls {
289  display: flex;
290  gap: 30px;
291  z-index: 10;
292  position: relative;
293}
294 
295.controls::before {
296  content: "";
297  position: absolute;
298  width: 155px;
299  height: 72px;
300  left: 50%;
301  top: 50%;
302  transform: translate(-50%, -50%);
303  border-radius: 36px;
304  background: rgba(0, 0, 0, 0.08);
305  filter: blur(4px);
306  z-index: -1;
307}
308 
309.controls::after {
310  content: "";
311  position: absolute;
312  width: 170px;
313  height: 90px;
314  left: 50%;
315  top: 50%;
316  transform: translate(-50%, -50%);
317  background: radial-gradient(
318    ellipse at top,
319    rgba(0, 0, 0, 0.4) 0%,
320    rgba(0, 0, 0, 0.25) 25%,
321    rgba(0, 0, 0, 0.15) 50%,
322    rgba(0, 0, 0, 0.05) 75%,
323    transparent 100%
324  );
325  border-radius: 85px 85px 0 0;
326  filter: blur(25px);
327  z-index: -1;
328}
329 
330.btn {
331  width: 140px;
332  height: 60px;
333  border-radius: 30px;
334  cursor: pointer;
335  position: relative;
336  display: flex;
337  align-items: center;
338  justify-content: center;
339  background: #fff;
340  box-shadow:
341    -10px -10px 20px rgba(255, 255, 255, 1),
342    10px 10px 20px rgba(0, 0, 0, 0.25);
343  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
344}
345 
346.btn::before {
347  content: "";
348  position: absolute;
349  inset: -3px;
350  border-radius: 33px;
351  padding: 3px;
352  background: linear-gradient(
353    45deg,
354    rgba(0, 230, 160, 0) 0%,
355    rgba(0, 230, 160, 0.4) 25%,
356    rgba(0, 230, 160, 1) 50%,
357    rgba(0, 230, 160, 0.4) 75%,
358    rgba(0, 230, 160, 0) 100%
359  );
360  background-size: 200% 200%;
361  -webkit-mask:
362    linear-gradient(#fff 0 0) content-box,
363    linear-gradient(#fff 0 0);
364  -webkit-mask-composite: xor;
365  mask-composite: exclude;
366  animation: rotate-gradient 3s linear infinite;
367  pointer-events: none;
368}
369 
370@keyframes rotate-gradient {
371  0% {
372    background-position: 0% 50%;
373  }
374  50% {
375    background-position: 100% 50%;
376  }
377  100% {
378    background-position: 0% 50%;
379  }
380}
381 
382.btn::after {
383  content: "";
384  position: absolute;
385  top: 2px;
386  left: 20%;
387  right: 20%;
388  height: 25%;
389  border-radius: 30px 30px 0 0;
390  background: linear-gradient(
391    180deg,
392    rgba(255, 255, 255, 0.3) 0%,
393    transparent 100%
394  );
395  pointer-events: none;
396}
397 
398.btn span {
399  font-size: 15px;
400  font-weight: 900;
401  letter-spacing: 5px;
402  color: #00cc8e;
403  text-shadow:
404    1px 1px 2px rgba(255, 255, 255, 0.8),
405    -1px -1px 2px rgba(0, 0, 0, 0.1);
406  position: relative;
407  z-index: 1;
408  transition: all 0.3s ease;
409}
410 
411.btn-text-stop {
412  display: none;
413}
414 
415.roll-toggle:checked ~ .controls .btn {
416  background: linear-gradient(180deg, #ff3366 0%, #ee2255 100%);
417  animation: pulse-neuro 0.8s ease-in-out infinite;
418}
419 
420@keyframes pulse-neuro {
421  0%,
422  100% {
423    transform: scale(1);
424  }
425  50% {
426    transform: scale(1.02);
427  }
428}
429 
430.roll-toggle:checked ~ .controls .btn::before {
431  background: linear-gradient(
432    45deg,
433    rgba(255, 51, 102, 0) 0%,
434    rgba(255, 51, 102, 0.4) 25%,
435    rgba(255, 51, 102, 1) 50%,
436    rgba(255, 51, 102, 0.4) 75%,
437    rgba(255, 51, 102, 0) 100%
438  );
439  background-size: 200% 200%;
440  animation: rotate-gradient 2s linear infinite;
441}
442 
443.roll-toggle:checked ~ .controls .btn span {
444  color: #fff;
445}
446 
447.roll-toggle:checked ~ .controls .btn-text {
448  display: none;
449}
450 
451.roll-toggle:checked ~ .controls .btn-text-stop {
452  display: block;
453}
454 
455.btn:active {
456  transform: scale(0.98);
457  box-shadow:
458    inset -4px -4px 12px rgba(0, 0, 0, 0.2),
459    inset 4px 4px 12px rgba(255, 255, 255, 0.5);
460}