Cool! Die Roll Effect Using CSS3 & JQuery

Published on March 14, 2013

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.

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.