Kali ini Admin akan berbagi sebuah code untuk membuat animasi Dadu dengan Code HTML, CSS dan JAVASCRIPT.
 |
| Animasi Dadu Html |
Selain menggunakan code html kita juga bisa membuatnya dengan code vb6 yang saya sudah buat sebelumnya yaitu dengan link Code Dadu VB6
Bagi anda yang menyukai bahasa html ataupun tidak, tidak salah kalau Anda mencobanya dengan code HTML, CSS dan JAVASCRIPT dibawah ini :
HTML CODE :
Nama File : Dadu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animasi Dadu </title>
<link rel="stylesheet" href="Dadu.css">
</head>
<body>
<div class="container">
<div class="dice">
<div class="face front"></div>
<div class="face back"></div>
<div class="face top"></div>
<div class="face bottom"></div>
<div class="face right"></div>
<div class="face left"></div>
</div>
<button class="roll">
<h2>Kocok</h2>
</button>
</div>
<script src="Dadu.js"></script>
</body>
</html>
CSS CODE
Nama File: Dadu.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
border: 0;
outline: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgba(221,50,125);
}
.container{
display: grid;
place-items: center;
width: 250px;
background: #eee;
padding: 60px 0 40px;
border-radius: 30px;
box-shadow: rgba(0,0,0,0.1);
}
.dice{
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transition: 1s ease;
}
@keyframes rolling{
50%{
transform: rotateX(455deg) rotateY(455deg);
}
}
.face{
position: absolute;
width: 100%;
height: 100%;
border: 5px solid #f6f3f0;
border-radius: 20px;
background: linear-gradient(145deg,
#dddbd8,#fff);
transform-style: preserve-3d;
}
.face::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px;
background: #f6f3f0;
transform: translateZ(-1px);
}
.face::after{
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 18px;
height: 18px;
background: #000;
border-radius: 50%;
}
.front{
transform: translateZ(50px);
}
.back{
transform: rotateX(180deg) translateZ(50px);
}
.top{
transform: rotateX(90deg) translateZ(50px);
}
.bottom{
transform: rotateX(-90deg) translateZ(50px);
}
.right{
transform: rotateY(90deg) translateZ(50px);
}
.left{
transform: rotateY(-90deg) translateZ(50px);
}
.front::after{
width: 30px;
height: 30px;
background: #000;
margin: -15px 0 0 -15px;
}
.back::after{
margin: -35px 0 0 -30px;
box-shadow: 40px 0,
0 25px,
40px 25px,
0 50px,
40px 50px;
}
.top::after{
margin: -30px 0 0 -30px;
box-shadow: 40px 40px;
}
.bottom::after{
margin: -36px 0 0 -36px;
box-shadow: 26px 26px,
52px 52px,
52px 0,
0 52px;
}
.right::after{
margin: -30px 0 0 -30px;
box-shadow: 40px 0,
0 40px,
40px 40px;
}
.left::after{
margin: -35px 0 0 -35px;
box-shadow: 25px 25px,
50px 50px;
}
.roll{
color: rgba(221,50,125);
margin-top: 60px;
padding: 6px 12px;
border-radius: 3px;
font-size: 10px;
font-weight: 600;
border: 2px solid rgba(221,50,125);
cursor: pointer;
}
.roll:hover{
color: #fff;
background: rgba(221,50,125);
}
CODE JAVASCRIPT
Nama File : Dadu.js
const dice = document.querySelector('.dice');
const rollBtn = document.querySelector('.roll');
const randomDice = () =>{
const random = Math.floor(Math.random() * 10);
if(random >= 1 && random <= 6){
rollDice(random);
}else{
randomDice();
}
}
const rollDice = random =>{
dice.style.animation = 'rolling 4s';
setTimeout(() =>{
switch (random) {
case 1: dice.style.transform =
'rotateX(0deg) rotateY(0deg)';
break;
case 6: dice.style.transform =
'rotateX(180deg) rotateY(0deg)';
break;
case 2: dice.style.transform =
'rotateX(-90deg) rotateY(0deg)';
break;
case 5: dice.style.transform =
'rotateX(90deg) rotateY(0deg)';
break;
case 3: dice.style.transform =
'rotateX(0deg) rotateY(90deg)';
break;
case 4: dice.style.transform =
'rotateX(0deg) rotateY(-90deg)';
break;
default: break;
}
dice.style.animation = 'none';
},4050);
}
rollBtn.addEventListener('click', randomDice);
Dremikian artikel kali ini tentang kode html untuk membuat animasi dadu.
Semoga artikel ini bermanfaat buat kita semua untuk menambah wawasan kita.
Selamat mencoba semoga berhasil.
No comments:
Post a Comment