Animated 3D Dice Roller In jQuery And CSS3 - Dice.js

An animated virtual dice roller that allows you to roll dice for random numbers (from 1 to 6).

Written in JavaScript (jQuery) and CSS 3D transforms.

How to use it:

1. Insert jQuery library and the Dice.js plugin's files into your HTML page.

<link href="/path/to/css/dice.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/dice.js"></script>

2. Create the HTML for the virtual dice roller.

<div class="dice__scene">
  <div id="dice__cube" class="show-front">
    <div class="dice__side dice__side--front"></div>
    <div class="dice__side dice__side--back"></div>
    <div class="dice__side dice__side--right"></div>
    <div class="dice__side dice__side--left"></div>
    <div class="dice__side dice__side--top"></div>
    <div class="dice__side dice__side--bottom"></div>
  </div>
</div>

3. Create a button to roll the dice.

<button class="demo__button" id="dice__btn">Roll the dice</button>

4. Insert a sound effect into the page if needed.

<audio preload="auto" id="dice__audio">
  <source src="./assets/sounds/dice-sound.mp3"></source>
</audio>

---

This awesome jQuery plugin is developed by alexerlandsson. For more Advanced Usages, please check the demo page or visit the official website.