-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathdice.html
117 lines (97 loc) · 8.41 KB
/
dice.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<title>Animated 3D Dice Roller Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="dice.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="dice2.css" rel="stylesheet" type="text/css" />
<style>
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image:linear-gradient(to right top,#b597f6,#439cfb);
margin: 0;
font-family: sans-serif;
background-size: cover;
}
.btn {
width: 30%;
padding: 12px 0;
outline: none;
border: 2px solid #7c00cf;
border-radius: 5px;
background: #439cfb;
color: #fff;
transition: 0.3s;
margin: 0 0 25px 0;
box-shadow: 0 10px 25px -10px #439cfb;
}
.box{
width: 60%;
height: 100%;
padding: 50px 15px;
margin-top: 25px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #fff;
box-shadow: 0 10px 25px -10px rgba(0,0,0,0.5);
border-radius: 5px;
/*padding-top: 30px;
padding: 30px;*/
}
.box h2{
margin-bottom: 36px;
text-align: center;
font-size: 36px;
color: #015a96;
font-family: sans-serif;
}
h1,p { color: #fff; }
</style>
</head>
<body>
<div class="box">
<h2>Animated 3D Dice Roller </h2>
<font color="#015a96"
font-family="sans-serif";>An animated virtual dice roller that allows you to roll dice for random numbers (from 1 to 6).</font>
<!-- Dice -->
<div class="dice__scene">
<div id="dice__cube" class="show-front">
<div class="dice__side dice__side--front"></div>
<div class="dice__side dice__side--back"></div>
<div class="dice__side dice__side--right"></div>
<div class="dice__side dice__side--left"></div>
<div class="dice__side dice__side--top"></div>
<div class="dice__side dice__side--bottom"></div>
</div>
</div>
<Style>
.dice__scene{width:70px;height:70px;-webkit-perspective:210px;perspective:210px}#dice__cube{position:relative;width:100%;height:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(-35px);transform:translateZ(-35px);-webkit-transition:-webkit-transform ease;transition:-webkit-transform ease;transition:transform ease;transition:transform ease,-webkit-transform ease;-webkit-transition-duration:.5s;transition-duration:.5s}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){#dice__cube{-webkit-transform-style:flat;transform-style:flat;-webkit-transform:none!important;transform:none!important}}@-webkit-keyframes showSameFont{100%{-webkit-transform:translateZ(-35px) rotateY(360deg);transform:translateZ(-35px) rotateY(360deg)}}@keyframes showSameFont{100%{-webkit-transform:translateZ(-35px) rotateY(360deg);transform:translateZ(-35px) rotateY(360deg)}}@-webkit-keyframes showSameRight{100%{-webkit-transform:translateZ(-35px) rotateY(-450deg);transform:translateZ(-35px) rotateY(-450deg)}}@keyframes showSameRight{100%{-webkit-transform:translateZ(-35px) rotateY(-450deg);transform:translateZ(-35px) rotateY(-450deg)}}@-webkit-keyframes showSameBack{100%{-webkit-transform:translateZ(-35px) rotateY(-540deg);transform:translateZ(-35px) rotateY(-540deg)}}@keyframes showSameBack{100%{-webkit-transform:translateZ(-35px) rotateY(-540deg);transform:translateZ(-35px) rotateY(-540deg)}}@-webkit-keyframes showSameLeft{100%{-webkit-transform:translateZ(-35px) rotateY(450deg);transform:translateZ(-35px) rotateY(450deg)}}@keyframes showSameLeft{100%{-webkit-transform:translateZ(-35px) rotateY(450deg);transform:translateZ(-35px) rotateY(450deg)}}@-webkit-keyframes showSameTop{100%{-webkit-transform:translateZ(-35px) rotateX(-450deg);transform:translateZ(-35px) rotateX(-450deg)}}@keyframes showSameTop{100%{-webkit-transform:translateZ(-35px) rotateX(-450deg);transform:translateZ(-35px) rotateX(-450deg)}}@-webkit-keyframes showSameBottom{100%{-webkit-transform:translateZ(-35px) rotateX(450deg);transform:translateZ(-35px) rotateX(450deg)}}@keyframes showSameBottom{100%{-webkit-transform:translateZ(-35px) rotateX(450deg);transform:translateZ(-35px) rotateX(450deg)}}#dice__cube.show-front{-webkit-transform:translateZ(-35px) rotateY(0);transform:translateZ(-35px) rotateY(0)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){#dice__cube.show-front .dice__side--front{display:block}}#dice__cube.show-front.show-same{-webkit-animation:showSameFont .5s ease;animation:showSameFont .5s ease}#dice__cube.show-right{-webkit-transform:translateZ(-35px) rotateY(-90deg);transform:translateZ(-35px) rotateY(-90deg)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){#dice__cube.show-right .dice__side--right{display:block}}#dice__cube.show-right.show-same{-webkit-animation:showSameRight .5s ease;animation:showSameRight .5s ease}#dice__cube.show-back{-webkit-transform:translateZ(-35px) rotateY(-180deg);transform:translateZ(-35px) rotateY(-180deg)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){#dice__cube.show-back .dice__side--back{display:block}}#dice__cube.show-back.show-same{-webkit-animation:showSameBack .5s ease;animation:showSameBack .5s ease}#dice__cube.show-left{-webkit-transform:translateZ(-35px) rotateY(90deg);transform:translateZ(-35px) rotateY(90deg)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){#dice__cube.show-left .dice__side--left{display:block}}#dice__cube.show-left.show-same{-webkit-animation:showSameLeft .5s ease;animation:showSameLeft .5s ease}#dice__cube.show-top{-webkit-transform:translateZ(-35px) rotateX(-90deg);transform:translateZ(-35px) rotateX(-90deg)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){#dice__cube.show-top .dice__side--top{display:block}}#dice__cube.show-top.show-same{-webkit-animation:showSameTop .5s ease;animation:showSameTop .5s ease}#dice__cube.show-bottom{-webkit-transform:translateZ(-35px) rotateX(90deg);transform:translateZ(-35px) rotateX(90deg)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){#dice__cube.show-bottom .dice__side--bottom{display:block}}#dice__cube.show-bottom.show-same{-webkit-animation:showSameBottom .5s ease;animation:showSameBottom .5s ease}.dice__side{position:absolute;width:100%;height:100%;background-size:100% auto;background-position:center;background-repeat:no-repeat;background-color:#fff;box-shadow:inset 0 0 7px rgba(0,0,0,.1);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.dice__side{display:none;-webkit-transform:none!important;transform:none!important}}.dice__side--front{-webkit-transform:rotateY(0) translateZ(35px);transform:rotateY(0) translateZ(35px);background-image:url(assets/images/dice-1.png)}.dice__side--back{-webkit-transform:rotateY(180deg) translateZ(35px);transform:rotateY(180deg) translateZ(35px);background-image:url(assets/images/dice-6.png)}.dice__side--right{-webkit-transform:rotateY(90deg) translateZ(35px);transform:rotateY(90deg) translateZ(35px);background-image:url(assets/images/dice-4.png)}.dice__side--left{-webkit-transform:rotateY(-90deg) translateZ(35px);transform:rotateY(-90deg) translateZ(35px);background-image:url(assets/images/dice-3.png)}.dice__side--top{-webkit-transform:rotateX(90deg) translateZ(35px);transform:rotateX(90deg) translateZ(35px);background-image:url(assets/images/dice-2.png)}.dice__side--bottom{-webkit-transform:rotateX(-90deg) translateZ(35px);transform:rotateX(-90deg) translateZ(35px);background-image:url(assets/images/dice-5.png)}
</Style>
<audio preload="auto" id="dice__audio">
<source src="./assets/sounds/dice-sound.mp3"></source>
</audio>
<!-- /Dice -->
<button class="btn" id="dice__btn" >Roll the dice</button></div>
<pre style="font-size: 19px" > made with ❤️ by random-script</pre>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" ></script> </script></script>
<script src="Script.js/dice.js"></script>
<script type="text/javascript">