Press "Enter" to skip to content

Rotating CSS Dice Roller in 3D using jQuery And CSS3 | Dice.js

Rolling 3D CSS Dice with jQuery is an animated virtual dice roll that lets you roll dice to random numbers.

rolling dice animation css, 3d dice roll javascript, javascript dice roll animation, 3d multiplayer dice roller, 3d virtual dice roller download, dice roll embed

Browser support

It works in all modern browsers. Since Internet Explorer does not support the conversion mode: keep-3d; The dice will not render in 3D in these browsers, but a backup is included to make sure the dice keeps working.

How to make use of it:

1. Insert jQuery library and the Dice.js plugin’s information into your HTML web 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 digital 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 impact into the web page if needed.

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

Animated 3D Dice Roller In jQuery And CSS3, Rotating CSS Dice Plugin/Github, 3d dice roll simulator


See Demo And Download

Official Website(alexerlandsson): Click Here

This superior jQuery/javascript plugin is developed by alexerlandsson. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.