<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Đỗ xúc sắc</h1>
<section class="container">
<div id="cube">
<div class="front">
<span class="dot dot1"></span>
</div>
<div class="back">
<span class="dot dot1"></span>
<span class="dot dot2"></span>
</div>
<div class="right">
<span class="dot dot1"></span>
<span class="dot dot2"></span>
<span class="dot dot3"></span>
</div>
<div class="left">
<span class="dot dot1"></span>
<span class="dot dot2"></span>
<span class="dot dot3"></span>
<span class="dot dot4"></span>
</div>
<div class="top">
<span class="dot dot1"></span>
<span class="dot dot2"></span>
<span class="dot dot3"></span>
<span class="dot dot4"></span>
<span class="dot dot5"></span>
</div>
<div class="bottom">
<span class="dot dot1"></span>
<span class="dot dot2"></span>
<span class="dot dot3"></span>
<span class="dot dot4"></span>
<span class="dot dot5"></span>
<span class="dot dot6"></span>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
h1 {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#cube .front {transform: translateZ(100px);}
#cube .back {transform: rotateX(-180deg) translateZ(100px);}
#cube .right {transform: rotateY(90deg) translateZ(100px);}
#cube .left {transform: rotateY(-90deg) translateZ(100px);}
#cube .top {transform: rotateX(90deg) translateZ(100px);}
#cube .bottom {transform: rotateX(-90deg) translateZ(100px);}
.container {
width: 200px;
height: 200px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #FFF;
perspective: 1000px;
perspective-origin: 50% 100%;
}
#cube {
width: 100%;
height: 100%;
top: 100px;
position: absolute;
transform-style: preserve-3d;
transition: transform 6s;
}
#cube:hover {cursor: pointer;}
#cube div {
background: hsla(0, 85%, 50%, 0.8);
display: block;
position: absolute;
width: 200px;
height: 100px;
border: 2px solid #ab1a1a;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 500%;
text-align: center;
padding: 50px 0;
}
.dot {
display: block;
position: absolute;
width: 30px;
height: 30px;
background: #fff;
border-radius: 15px;
}
.front .dot1 {top: 85px; left: 85px;}
.back .dot1 {top: 45px; left: 45px;}
.back .dot2 {top: 125px; left: 125px;}
.right .dot1 {top: 45px; left: 45px;}
.right .dot2 {top: 85px; left: 85px;}
.right .dot3 {top: 125px; left: 125px;}
.left .dot1 {top: 45px; left: 45px;}
.left .dot2 {top: 45px; left: 125px;}
.left .dot3 {top: 125px; left: 45px;}
.left .dot4 {top: 125px; left: 125px;}
.top .dot1 {top: 45px; left: 45px;}
.top .dot2 {top: 45px; left: 125px;}
.top .dot3 {top: 85px; left: 85px;}
.top .dot4 {top: 125px; left: 45px;}
.top .dot5 {top: 125px; left: 125px;}
.bottom .dot1 {top: 45px; left: 45px;}
.bottom .dot2 {top: 45px; left: 85px;}
.bottom .dot3 {top: 45px; left: 125px;}
.bottom .dot4 {top: 125px; left: 45px;}
.bottom .dot5 {top: 125px; left: 85px;}
.bottom .dot6 {top: 125px; left: 125px;}
var cube = document.getElementById('cube');
var min = 1;
var max = 24;
cube.onclick = function() {
var xRand = getRandom(max, min);
var yRand = getRandom(max, min);
cube.style.webkitTransform = 'rotateX('+xRand+'deg) rotateY('+yRand+'deg)';
cube.style.transform = 'rotateX('+xRand+'deg) rotateY('+yRand+'deg)';
}
function getRandom(max, min) {
return (Math.floor(Math.random() * (max-min)) + min) * 90;
}