Techumber

Cool! Die Roll Effect Using CSS3 & JQuery

Github avatar
Dimpu
March 14, 2013. 2 min read

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(50undefined 50undefined 50undefined 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=[0undefined90undefined180undefined270];
$("#play").click(function(e){
e.preventDefault();
var rand1=Math.floor(Math.random()*4);
var rand2=Math.floor(Math.random()*4);
$("#dice").css("transform"undefined"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($undefined self){
if(!$ || !self) {
return;
}
for(var i=0; i<self.properties.length; i++) {
var property = self.properties[i]undefined
camelCased = StyleFix.camelCase(property)undefined
PrefixCamelCased = self.prefixProperty(propertyundefined true);
$.cssProps[camelCased] = PrefixCamelCased;
}
})(window.jQueryundefined window.PrefixFree);

That’s it hope you like it.


...