Dice

Developer
Faryn Huang
Size
5,026 Kb
Views
6,072
  1. Dice Previews
  2. Dice HTML Codes
  3. Dice CSS Codes
  4. Dice JS Codes

How do I make an dice?

Sass practice. What is a dice? How do you make a dice? This script and codes were developed by Faryn Huang on 16 January 2023, Monday.

Dice Previews
IQ Test

Dice - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dice</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper NormalDice">	<span class="title">Normal</span>	<i class="dice-1" data-type="dice"></i>	<i class="dice-2" data-type="dice"></i>	<i class="dice-3" data-type="dice"></i>	<i class="dice-4" data-type="dice"></i>	<i class="dice-5" data-type="dice"></i>	<i class="dice-6" data-type="dice"></i>
</div>
<div class="wrapper ThreeDice">	<span class="title">3Dice</span>	<div class="roll-1"> <i class="shadow"></i>	<i class="dice-1" data-type="dice"></i>	<i class="dice-3" data-type="dice"></i>	<i class="dice-5" data-type="dice"></i>	</div>	<div class="roll-2"> <i class="shadow"></i>	<i class="dice-2" data-type="dice"></i>	<i class="dice-3" data-type="dice"></i>	<i class="dice-1" data-type="dice"></i>	</div>	<div class="roll-3"> <i class="shadow"></i>	<i class="dice-3" data-type="dice"></i>	<i class="dice-6" data-type="dice"></i>	<i class="dice-5" data-type="dice"></i>	</div>	<div class="roll-4"> <i class="shadow"></i>	<i class="dice-4" data-type="dice"></i>	<i class="dice-2" data-type="dice"></i>	<i class="dice-1" data-type="dice"></i>	</div>	<div class="roll-5"> <i class="shadow"></i>	<i class="dice-5" data-type="dice"></i>	<i class="dice-1" data-type="dice"></i>	<i class="dice-3" data-type="dice"></i>	</div>	<div class="roll-6"> <i class="shadow"></i>	<i class="dice-6" data-type="dice"></i>	<i class="dice-2" data-type="dice"></i>	<i class="dice-4" data-type="dice"></i>	</div>
</div>
<div class="wrapper ThreeDice Spin">	<span class="title">Spin</span>	<div class="pure-spin">	<i class="dice-5" data-type="dice"></i>	<i class="dice-4" data-type="dice"></i>	<i class="dice-6" data-type="dice"></i>	<i class="dice-1" data-type="dice"></i>	<i class="dice-3" data-type="dice"></i>	<i class="dice-2" data-type="dice"></i>	</div>	<div class="sh">	<i class="shadow"></i>	</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dice - Script Codes CSS Codes

.title { font-size: 10px; color: #a4a4a4; margin: -10px 0 5px -4px; display: block; text-shadow: 0px 0px 1px #aaaaaa;
}
.pic { border: 1px #c1c1c1 solid; padding: 12px; margin: 7px 12px; margin-top: 5px; width: 26px; font-size: 12px; float: left; -moz-border-radius: 4px / 4px; -webkit-border-radius: 4px 4px; border-radius: 4px / 4px;
}
.wrapper { position: relative; margin-top: 10px; width: 50px; float: left;
}
.wrapper .title { margin-top: -3px; margin-left: 9px;
}
i[class][data-type=dice] { position: relative; width: 30px; height: 30px; border: 1px #c1c3bf solid; margin: 7px; display: block; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.42); -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.42); box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.42);
}
.ThreeDice i[class][data-type=dice] { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
.ThreeDice i[class][data-type=dice] .dice-face { height: 30px;
}
i[class][data-type=dice] .dice-face { position: absolute; background-color: #EEEEEE; height: 26px; width: 30px; display: block; z-index: 999; top: -1px; border-top: 1px #E9EBEB solid; border-bottom: 1px #F2F2F2 solid; background-color: #f4f4f4; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
i[class][data-type=dice] .shadow { position: absolute; text-indent: -9999px; height: 4px; width: inherit; background-color: #B0B4A9; z-index: 0; bottom: -1px; border-bottom: 1px #696b68 solid; -moz-border-radius: 0px 0px 3px 3px; -webkit-border-radius: 0px; border-radius: 0px 0px 3px 3px;
}
.dice-dot { width: 7px; height: 7px; text-indent: -9999px; display: block; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55); -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55);
}
.dice-1 .dice-face { text-align: center;
}
.dice-1 .dice-face .dice-dot { background-color: red; position: absolute; top: 9px; left: 12px;
}
.ThreeDice .dice-1 .dice-face .dice-dot { top: 12px;
}
.dice-2 .dice-face .dice-dot { background-color: black;
}
.dice-2 .dice-face .dice-dot:first-child { position: absolute; top: 2px; left: 3px;
}
.ThreeDice .dice-2 .dice-face .dice-dot:first-child { top: 3px;
}
.dice-2 .dice-face .dice-dot:last-child { position: absolute; bottom: 4px; right: 3px;
}
.ThreeDice .dice-2 .dice-face .dice-dot:last-child { bottom: 3px;
}
.dice-3 .dice-face .dice-dot { background-color: black;
}
.dice-3 .dice-face .dice-dot:first-child { position: absolute; top: 2px; left: 3px;
}
.dice-3 .dice-face .dice-dot:nth-child(2) { position: absolute; top: 10px; left: 12px;
}
.ThreeDice .dice-3 .dice-face .dice-dot:nth-child(2) { top: 11px;
}
.dice-3 .dice-face .dice-dot:last-child { position: absolute; bottom: 2px; right: 3px;
}
.ThreeDice .dice-3 .dice-face .dice-dot:last-child { bottom: 3px;
}
.dice-4 .dice-face .dice-dot { background-color: red;
}
.dice-4 .dice-face .dice-dot:first-child { position: absolute; top: 2px; left: 3px;
}
.ThreeDice .dice-4 .dice-face .dice-dot:first-child { top: 3px;
}
.dice-4 .dice-face .dice-dot:nth-child(2) { position: absolute; top: 2px; right: 3px;
}
.ThreeDice .dice-4 .dice-face .dice-dot:nth-child(2) { top: 3px;
}
.dice-4 .dice-face .dice-dot:nth-child(3) { position: absolute; bottom: 3px; left: 3px;
}
.dice-4 .dice-face .dice-dot:last-child { position: absolute; bottom: 3px; right: 3px;
}
.dice-5 .dice-face .dice-dot { background-color: black;
}
.dice-5 .dice-face .dice-dot:first-child { position: absolute; top: 2px; left: 3px;
}
.dice-5 .dice-face .dice-dot:nth-child(2) { position: absolute; top: 2px; right: 3px;
}
.dice-5 .dice-face .dice-dot:nth-child(3) { position: absolute; top: 9px; left: 12px;
}
.ThreeDice .dice-5 .dice-face .dice-dot:nth-child(3) { top: 11px;
}
.dice-5 .dice-face .dice-dot:nth-child(4) { position: absolute; bottom: 3px; left: 3px;
}
.dice-5 .dice-face .dice-dot:last-child { position: absolute; bottom: 3px; right: 3px;
}
.dice-6 .dice-face .dice-dot { background-color: black;
}
.dice-6 .dice-face .dice-dot:first-child { position: absolute; top: 2px; left: 3px;
}
.dice-6 .dice-face .dice-dot:nth-child(2) { position: absolute; top: 2px; right: 3px;
}
.dice-6 .dice-face .dice-dot:nth-child(3) { position: absolute; top: 10px; right: 3px;
}
.ThreeDice .dice-6 .dice-face .dice-dot:nth-child(3) { top: 12px;
}
.dice-6 .dice-face .dice-dot:nth-child(4) { position: absolute; top: 10px; left: 3px;
}
.ThreeDice .dice-6 .dice-face .dice-dot:nth-child(4) { top: 12px;
}
.dice-6 .dice-face .dice-dot:nth-child(5) { position: absolute; bottom: 1px; left: 3px;
}
.dice-6 .dice-face .dice-dot:last-child { position: absolute; bottom: 1px; right: 3px;
}
.ThreeDice .roll-1 .dice-1, .ThreeDice .roll-2 .dice-2, .ThreeDice .roll-3 .dice-3, .ThreeDice .roll-4 .dice-4, .ThreeDice .roll-5 .dice-5, .ThreeDice .roll-6 .dice-6, .ThreeDice .shadow { -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8); box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8); transform: scale(1, 0.95) rotate(-17deg) skew(5deg);
}
.ThreeDice .roll-1 .dice-3, .ThreeDice .roll-2 .dice-3, .ThreeDice .roll-3 .dice-6, .ThreeDice .roll-4 .dice-2, .ThreeDice .roll-5 .dice-1, .ThreeDice .roll-6 .dice-2 { -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8); box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8); margin-left: -8px; margin-top: -26px; transform: rotate(90deg) scale(0.55, 0.38) skew(-59deg); background-color: #c1c1c1;
}
.ThreeDice .roll-1 .dice-3 .dice-face, .ThreeDice .roll-2 .dice-3 .dice-face, .ThreeDice .roll-3 .dice-6 .dice-face, .ThreeDice .roll-4 .dice-2 .dice-face, .ThreeDice .roll-5 .dice-1 .dice-face, .ThreeDice .roll-6 .dice-2 .dice-face { background-color: #c1c1c1;
}
.ThreeDice .roll-1 .dice-5, .ThreeDice .roll-2 .dice-1, .ThreeDice .roll-3 .dice-5, .ThreeDice .roll-4 .dice-1, .ThreeDice .roll-5 .dice-3, .ThreeDice .roll-6 .dice-4 { -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8); box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8); margin-top: -29px; margin-left: 13px; transform: rotate(91deg) scale(0.54, 0.92) skew(26deg); background-color: #ddd;
}
.ThreeDice .roll-1 .dice-5 .dice-face, .ThreeDice .roll-2 .dice-1 .dice-face, .ThreeDice .roll-3 .dice-5 .dice-face, .ThreeDice .roll-4 .dice-1 .dice-face, .ThreeDice .roll-5 .dice-3 .dice-face, .ThreeDice .roll-6 .dice-4 .dice-face { background-color: #ddd;
}
.ThreeDice { margin-left: 20px;
}
.ThreeDice .dice-face { height: inherit;
}
.ThreeDice .shadow { -moz-border-radius: 4px / 4px; -webkit-border-radius: 4px 4px; border-radius: 4px / 4px; -moz-box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.76); -webkit-box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.76); box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.76); position: absolute; z-index: 0; display: block; width: 32px; height: 30px; margin-top: 21px; margin-left: 7px; background-color: rgba(0, 0, 0, 0.5);
}
.Spin { position: relative;
}
.Spin .sh { margin-top: 55px; margin-left: 8px; width: 30px; height: 30px; transform: rotateX(70deg);
}
.Spin .sh .shadow { transform-style: preserve-3d; -webkit-animation: spinSh 10s infinite linear;
}
.Spin .pure-spin { transform-style: preserve-3d; -moz-animation: spin 10s infinite linear; -webkit-animation: spin 10s infinite linear; animation: spin 10s infinite linear; position: absolute; margin-top: 10px; margin-left: 10px; height: 40px; width: 40px;
}
.Spin .pure-spin i[class][data-type=dice] { position: absolute;
}
.Spin .pure-spin .dice-1 { transform: rotateY(180deg) translateZ(15px);
}
.Spin .pure-spin .dice-2 { transform: rotateX(-90deg) translateZ(15px) rotate(180deg);
}
.Spin .pure-spin .dice-3 { transform: rotateY(90deg) translateZ(15px);
}
.Spin .pure-spin .dice-4 { transform: rotateX(90deg) translateZ(15px);
}
.Spin .pure-spin .dice-5 { transform: rotateY(-90deg) translateZ(15px);
}
.Spin .pure-spin .dice-6 { transform: translateZ(15px);
}
.Spin .pure-spin .dice-face { background-color: #fff;
}
@-webkit-keyframes spin { 0% { transform: rotateX(1turn) rotateY(1turn); }
}
@-moz-keyframes spin { 0% { transform: rotateX(1turn) rotateY(1turn); }
}
@-ms-keyframes spin { 0% { transform: rotateX(1turn) rotateY(1turn); }
}
@keyframes spin { 0% { transform: rotateX(1turn) rotateY(1turn); }
}
@-webkit-keyframes spinSh { 0% { transform: rotate(0deg) scale(1.2, 1.2) translateX(0px); } 50% { transform: rotate(180deg) scale(1, 0.9) translateX(5px); } 75% { transform: rotate(270deg) scale(1, 1) translateX(3px); } 100% { transform: rotate(360deg) scale(1.2, 1.2) translateX(0px); }
}
@-moz-keyframes spinSh { 0% { transform: rotate(0deg) scale(1.2, 1.2) translateX(0px); } 50% { transform: rotate(180deg) scale(1, 0.9) translateX(5px); } 75% { transform: rotate(270deg) scale(1, 1) translateX(3px); } 100% { transform: rotate(360deg) scale(1.2, 1.2) translateX(0px); }
}
@-ms-keyframes spinSh { 0% { transform: rotate(0deg) scale(1.2, 1.2) translateX(0px); } 50% { transform: rotate(180deg) scale(1, 0.9) translateX(5px); } 75% { transform: rotate(270deg) scale(1, 1) translateX(3px); } 100% { transform: rotate(360deg) scale(1.2, 1.2) translateX(0px); }
}
@keyframes spinSh { 0% { transform: rotate(0deg) scale(1.2, 1.2) translateX(0px); } 50% { transform: rotate(180deg) scale(1, 0.9) translateX(5px); } 75% { transform: rotate(270deg) scale(1, 1) translateX(3px); } 100% { transform: rotate(360deg) scale(1.2, 1.2) translateX(0px); }
}
body { overflow: hidden;
}

Dice - Script Codes JS Codes

$(function(){	$('.NormalDice i[class][data-type=dice]').each(function(){	$(this).html('<div class="dice-face"></div><div class="shadow">shadow</div>');	var diceNum = $(this).attr('class'),	sub = diceNum.substr(5);	while (sub --) {	$(this).find('div.dice-face').append('<span class="dice-dot">dice-dot</span>')	}	});	$('.ThreeDice i[class][data-type=dice]').each(function(){	$(this).html('<div class="dice-face"></div>');	var diceNum = $(this).attr('class'),	sub = diceNum.substr(5);	while (sub --) {	$(this).find('div.dice-face').append('<span class="dice-dot">dice-dot</span>')	}	});
})
Dice - Script Codes
Dice - Script Codes
Home Page Home
Developer Faryn Huang
Username fraina
Uploaded January 16, 2023
Rating 3
Size 5,026 Kb
Views 6,072
Do you need developer help for Dice?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Faryn Huang (fraina) Script Codes
Name
Material Design-Layout-Principles Practice
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!