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


demo

download

HTML

<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>  
</div>  
</section> 

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

#roll-wrap { 
perspective: 800;  
perspective-origin: 50% 200px;  
} 
#play{ 
color: #333;  
background: #fff;  
line-height: 40px;  
padding: 10px 33px;  
border-radius: 5px;  
font-weight: bolder;  
} 
#play:hover{ 
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

$(function(){ 
var x=[0,90,180,270];  
$("#play").click(function(e){ 
e.preventDefault();  
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.
Note: 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) {  
return;  
} 
for(var i=0; i<self.properties.length; i++) {  
var property = self.properties[i],  
camelCased = StyleFix.camelCase(property),  
PrefixCamelCased = self.prefixProperty(property, true);  
$.cssProps[camelCased] = PrefixCamelCased; 
} 
})(window.jQuery, window.PrefixFree); 

That's it hope you like it.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.