Cool! Die Roll Effect Using CSS3 & JQuery

Hi, Guys welcome back. In today’s post I will write about create Die roll using pure CSS3 and jquery. We use die roll in many games(For example Snakes and Ladders). I created this die using CSS3 properties transform,perspective. I used jquery to roll the die . It is very easy to create we only need to change the transform property. Just jump in to the code and see how it work.
Cool! Die Roll Effect Using CSS3 & JQuery



<section id="roll-wrap"> 
<div id="dice" style="transform: rotateX(40deg) rotateY(37deg);"> 
<div class="sf f1">1</div> 
<div class="sf f2">2</div> 
<div class="sf f3">3</div> 
<div class="sf f4">4</div> 
<div class="sf f5">5</div> 
<div class="sf f6">6</div> 

Here content will roll-wrap contains our dice. Here _sf_ represents Surface.
CSS code

#roll-wrap { 
perspective: 800; 
perspective-origin: 50% 200px; 
color: #333; 
background: #fff; 
line-height: 40px; 
padding: 10px 33px; 
border-radius: 5px; 
font-weight: bolder; 
cursor: pointer; 
#dice { 
position: relative; 
margin: 10px auto 0; 
height: 400px; 
width: 400px; 
transition: transform 2s linear; 
transform-style: preserve-3d; 
.sf { 
position: absolute; 
height: 62px; 
width: 62px; 
padding: 20px; 
background-color: rgba(50, 50, 50, 0.7); 
font-size: 37px; 
color: #fff; 
border: 1px solid #555; 
border-radius: 3px; 
text-align: center; 
line-height: 62px; 
#dice .f1 { 
transform: rotateX(90deg) translateZ(50px); 
#dice .f2 { 
transform: translateZ(50px); 
#dice .f3 { 
transform: rotateY(90deg) translateZ(50px); 
#dice .f4 { 
transform: rotateY(180deg) translateZ(50px); 
#dice .f5 { 
transform: rotateY(-90deg) translateZ(50px); 
#dice .f6 { 
transform: rotateX(-90deg) rotate(180deg) translateZ(50px); 

Here we using css3 properties with out any browser prefix because we will use this prefixfree.js. It will take care of cross browser prefix issues.
JQuery Code

var x=[0,90,180,270]; 
var rand1=Math.floor(Math.random()*4); 
var rand2=Math.floor(Math.random()*4); 
$("#dice").css("transform","rotateX("+x[rand1]+"deg) rotateY("+x[rand2]+"deg)"); 

This is our main code. When we click on Play button it will do it’s magic.
We need to add prefix.js script to our document.

<script type="text/javascript" src="jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="prefixfree.min.js"></script> 

Also we need to add following code so use css3 prefix in side jquery.

//Prefixfree support code for jquery 
(function($, self){ 
if(!$ || !self) { 
for(var i=0; i<; i++) { 
var property =[i], 
camelCased = StyleFix.camelCase(property), 
PrefixCamelCased = self.prefixProperty(property, true); 
$.cssProps[camelCased] = PrefixCamelCased; 
})(window.jQuery, window.PrefixFree); 

That’s it hope you like it.