Categories
Web development

Roll the dice!



We know now how to toss a coin using JavaScript, so why not to try roll the dice too?

CSS and JavaScript Dice Animation

Try to roll two sixes!

Demo:

To see the dice animation on the website click here.

To create the Dice game follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS
  3. Add JavaScript

Step1.

Add HTML

Create the Game container and another one for dice, and dots:

 <div class="game">
    <div class="container">
      <div id='dice1' class="dice dice-one">
        <div id="dice-one-side-one" class='side one'>
          <div class="dot one-1"></div>
        </div>
        <div id="dice-one-side-two" class='side two'>
          <div class="dot two-1"></div>
          <div class="dot two-2"></div>
        </div>
        <div id="dice-one-side-three" class='side three'>
          <div class="dot three-1"></div>
          <div class="dot three-2"></div>
          <div class="dot three-3"></div>
        </div>
        <div id="dice-one-side-four" class='side four'>
          <div class="dot four-1"></div>
          <div class="dot four-2"></div>
          <div class="dot four-3"></div>
          <div class="dot four-4"></div>
        </div>
        <div id="dice-one-side-five" class='side five'>
          <div class="dot five-1"></div>
          <div class="dot five-2"></div>
          <div class="dot five-3"></div>
          <div class="dot five-4"></div>
          <div class="dot five-5"></div>
        </div>
        <div id="dice-one-side-six" class='side six'>
          <div class="dot six-1"></div>
          <div class="dot six-2"></div>
          <div class="dot six-3"></div>
          <div class="dot six-4"></div>
          <div class="dot six-5"></div>
          <div class="dot six-6"></div>
        </div>
      </div>
   </div>
    <div class="container">
      <div id='dice2' class="dice dice-two">
        <div id="dice-two-side-one" class='side one'>
          <div class="dot one-1"></div>
        </div>
        <div id="dice-two-side-two" class='side two'>
          <div class="dot two-1"></div>
          <div class="dot two-2"></div>
        </div>
        <div id="dice-two-side-three" class='side three'>
          <div class="dot three-1"></div>
          <div class="dot three-2"></div>
          <div class="dot three-3"></div>
        </div>
        <div id="dice-two-side-four" class='side four'>
          <div class="dot four-1"></div>
          <div class="dot four-2"></div>
          <div class="dot four-3"></div>
          <div class="dot four-4"></div>
        </div>
        <div id="dice-two-side-five" class='side five'>
          <div class="dot five-1"></div>
          <div class="dot five-2"></div>
          <div class="dot five-3"></div>
          <div class="dot five-4"></div>
          <div class="dot five-5"></div>
        </div>
        <div id="dice-two-side-six" class='side six'>
          <div class="dot six-1"></div>
          <div class="dot six-2"></div>
          <div class="dot six-3"></div>
          <div class="dot six-4"></div>
          <div class="dot six-5"></div>
          <div class="dot six-6"></div>
        </div>
      </div> 
   </div>
   <div id='roll' class='roll-button'><button>Roll dice!</button></div>
  </div> 

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #70c1b3;
}
.game {
  position: relative;
  width: auto;
  height: 100%; 
}

.container {
  position: relative;
  display: inline-block;
  top: 200px;
}

Style the button:

button {
  position: relative;
  top:80px;
  padding: 15px 50px;
  color: #fff;
  background-color: #f4d35e;
  border: none;
  font-size: 20px;
  border-radius: 20px; 
  box-shadow: 1px 3px #50514F;
  outline: none;
  transition: .3s; 
}
button:hover, button:active {
  outline: none;
  background: #50514F;
  cursor: pointer;
  transform: translateY(15px); 
}

Add dice and dots:

.dice {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1s; }

.dot {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 5px 5px -10px;
  border-radius: 20px;
  background-color: #ef233c;
  box-shadow: inset 2px 2px #d90429;}

.dice-one {
  left: 450px; }

.dice-two {
  left: 300px;
  top:-200px;
}

.side {
  position: absolute;
  background-color: #ffF;
  border-radius:5px;
  width: 100px;
  height: 100px;
  border: 1px solid #e5e5e5;
  text-align: center;
  line-height: 2em;
}

.side:nth-child(1) {
  transform: translateZ(3.1em); }

.side:nth-child(6) {
  transform: rotateY(90deg) translateZ(3.1em); }

.side:nth-child(3) {
  transform: rotateY(-90deg) translateZ(3.1em); }

.side:nth-child(4) {
  transform: rotateX(90deg) translateZ(3.1em); }

.side:nth-child(5) {
  transform: rotateX(-90deg) translateZ(3.1em); }

.side:nth-child(2) {
  transform: rotateY(-180deg) translateZ(3.1em); }

.two-1, .three-1, .four-1, .five-1, .six-1 {
  top: 20%;
  left: 20%; }

.four-3, .five-3, .six-4 {
  top: 20%;
  left: 80%; }

.one-1, .three-2, .five-5 {
  top: 50%;
  left: 50%; }

.four-2, .five-2, .six-3 {
  top: 80%;
  left: 20%; }

.two-2, .three-3, .four-4, .five-4, .six-6 {
  top: 80%;
  left: 80%; }

.six-2 {
  top: 50%;
  left: 20%; }

.six-5 {
  top: 50%;
  left: 80%; 
}
roll the dice

Add .show elements which will spin the dice:

.show-1 {
  transform: rotateX(720deg) rotateZ(-720deg); }

.show-6 {
  transform: rotateX(-900deg) rotateZ(1080deg); }

.show-3 {
  transform: rotateY(-450deg) rotateZ(-1440deg); }

.show-4 {
  transform: rotateY(810deg) rotateZ(720deg); }

.show-5 {
  transform: rotateX(-810deg) rotateZ(-1080deg); }

.show-2 {
  transform: rotateX(450deg) rotateZ(-720deg); }

Step3.

Add JavaScript

Note: To generate a random number of the dice dots we need to use Math.floor(Math.random() * 6) + 1;
If Math.random() were to roll 0.9, we take that and multiply it by 6 which gives us 5.4. Then we take the floor of that which is 5. Then we add 1 which gives us a final result of 6. So the random numbers will only be between 1 and 6.

var elDiceOne       = document.getElementById('dice1');
var elDiceTwo       = document.getElementById('dice2');
var elComeOut       = document.getElementById('roll');

elComeOut.onclick   = function () {rollDice();};

function rollDice() {

  var diceOne   = Math.floor((Math.random() * 6) + 1);
  var diceTwo   = Math.floor((Math.random() * 6) + 1);
 
  console.log(diceOne + ' ' + diceTwo);

  for (var i = 1; i <= 6; i++) {
    elDiceOne.classList.remove('show-' + i);
    if (diceOne === i) {
      elDiceOne.classList.add('show-' + i);
    }
  }

  for (var k = 1; k <= 6; k++) {
    elDiceTwo.classList.remove('show-' + k);
    if (diceTwo === k) {
      elDiceTwo.classList.add('show-' + k);
    }
  } 
  setTimeout(rollDice(), 1000);
}

Watch also the video tutorial:

Enjoy coding!

Read also:

Heads or Tails? Toss a Coin!

CSS & JavaScript Memory Game

Games

CSS/jQuery/JS Playing Cube

CSS Dice

Demo:

*to see the animation on the website click here.
*click and drag the cube and change its position.

To create a 3d playing cube you will need 6 pictures (one of each side of the cube). You can use these below:

and then:

  1. Add HTML
  2. Add CSS
  3. Add jQuery/JavaScript

Step1.

Add HTML

<div class="game">
  <div class="cube">
  <div class="side front"></div>
  <div class="side back"></div>
  <div class="side right"></div>
  <div class="side left"></div>
  <div class="side top"></div>
  <div class="side bottom"></div>
  </div>
</div>

Step2.

Add CSS

body {
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.game {
  perspective: 800px;
}
.cube {
  font-size: 50px;
  width: 100px;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
  line-height: 2em;
}

.front {transform: translateZ(1em);
        background-image:url('https://lenadesignorg.files.wordpress.com/2020/04/1-1.png?w=100');}
.top {transform: rotateX(90deg) translateZ(1em);
       background-image:url('https://lenadesignorg.files.wordpress.com/2020/04/4-1.png?w=100');}

.right {transform: rotateY(90deg) translateZ(1em);
background-image:url('https://lenadesignorg.files.wordpress.com/2020/04/5-1.png?w=100');}

.left {transform: rotateY(-90deg) translateZ(1em);
background-image:url('https://lenadesignorg.files.wordpress.com/2020/04/2-1.png?w=100');}

.bottom {transform: rotateX(-90deg) translateZ(1em);
background-image:url('https://lenadesignorg.files.wordpress.com/2020/04/3-1.png?w=100');}

.back {transform: rotateY(-180deg) translateZ(1em);
background-image:url('https://lenadesignorg.files.wordpress.com/2020/04/6-1.png?w=100');}

Step3.

Add jQuery/JavaScript

var lastMouseX = 0,
	lastMouseY = 0;
var rotX = 0,
	rotY = 0;

$(document).on("mousedown", function(ev) {
	lastMouseX = ev.clientX;
	lastMouseY = ev.clientY;
	$(document).on("mousemove", mouseMoved);
});
$(document).on("mouseup", function() {
	$(document).off("mousemove", mouseMoved);
});

function mouseMoved(ev) {
	var deltaX = ev.pageX - lastMouseX;
	var deltaY = ev.pageY - lastMouseY;

	lastMouseX = ev.pageX;
	lastMouseY = ev.pageY;

	rotY -= deltaX * 0.1;
	rotX += deltaY * 0.1;

	$(".cube").css("transform", "translateX( 0px) rotateX( " + rotX + "deg) rotateY(" + rotY + "deg)");
}

Enjoy coding!

Read also:

CSS & jQuery 3d Cube

Roll the dice!

3d

Categories
Web development

CSS & jQuery 3d Cube

3d Cube

Demo:

*the cube is gonna rotate with the move of the mouse.
*to see the CSS & jQuery 3d Cube on the website click here.

What do you need to do?

To create the CSS & jQuery rotating cube follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add JavaScript/jQuery

Step1.

Add HTML

Each cube has 6 sides. We need to create them in HTML:

<div id="wrap">
    <div id="D3Cube">
        <div id="side1"></div>
        <div id="side2"></div>
        <div id="side3"></div>
        <div id="side4"></div>
        <div id="side5"></div>
        <div id="side6"></div>
    </div>
</div>

Step2.

Add CSS

body {
  background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(233,210,148,1) 100%);
  height:100vh;
  display:flex;
  justify-content: center;
  align-items: center;
}

#wrap {
    position:relative;
}
#D3Cube {
    position: relative;
    width: 250px;
    height: 250px;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#D3Cube > div {
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    width: 250px;
    height: 250px;
    float: left;
    overflow: hidden;
    opacity: 0.8;
}
#side1 {
    transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #F9E79F;
}
#side2 {
    transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #85C1E9;
}
#side3 {
    transform: translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: translateX(0px) translateY(0px) translateZ(125px);
    background-color: #F1948A;
}
#side4 {
    transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #1ABC9C;
}
#side5 {
    transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #8E44AD;
}
#side6 {
    transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
    background-color: #D7DBDD;
   }

Step3.

Add JavaScript/jQuery

$(document).mousemove(function(e) {
  $('#3dCube').css('transform', 'rotateX(0deg) rotateY(0deg)');
  
  var rotate_X;
  var rotate_Y;
  var invert = false;
  
  if (invert) {
    rotate_X = e.pageX;
    rotate_Y = e.pageY;
  } else if (!invert) {
    rotate_X = e.pageX;
    rotate_Y = -e.pageY;
  }
  
  $('#D3Cube').css('transform', 'rotateX(' + rotate_Y + 'deg) rotateY(' + rotate_X + 'deg)')
});

Enjoy coding!

Read also:

CSS & JavaScript Memory Game

Heads or Tails? Toss a Coin!

CSS/JS Eye Follows Mouse Cursor + Blink on Hover

Categories
Web development

CSS Perspective Property, CSS Perspective-origin Property & 3d Cube

CSS Perspective property

Today we’ll talk about the CSS Perspective property, then we’ll go to the CSS Perspective-origin property and in the end, we’ll create the 3d cube using pure CSS.

  1. CSS Perspective property
  2. CSS Perspective-origin property
  3. 3d Cube

Click on/ drag to rotate the Cube:


1
6
4
3
5
2







CSS Perspective Property

The CSS perspective property is used to give a 3D-positioned element some perspective.

The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.

When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.

CSS Syntax:

perspective: length|none;

Where:

length– how far the element is placed from the view.

none default value. Same as 0. The perspective is not set.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#el1 {
  position: relative;
  height: 100px;
  width: 100px;
  margin-left: 60px;
  border: 5px solid #2a9d8f;
  perspective: 100px;  
}
#el2, #el4 {
  padding: 35px;
  position: absolute;
  border: 5px solid #e76f51;
  background-color: #e9c46a; 
  transform-style: preserve-3d;
  transform: rotateX(45deg);
  opacity:0.5; 
}
#el3 {
  position: relative;
  height: 100px;
  width: 100px;
  margin-left: 60px;
  border: 5px solid #2a9d8f;
  perspective: none;
}
</style>
</head>
<body>

<h4>perspective: 100px:</h4>
<div id="el1">1
  <div id="el2">2</div>
</div>
<h4>perspective: none:</h4>
<div id="el3">3
  <div id="el4">4</div>
</div>
</body>

Output:

perspective: 100px:

1
2

perspective: none:

3
4

CSS Perspective-origin Property

The perspective-origin property defines at which position the user is looking at the 3D-positioned element.

When defining the perspective-origin property for an element, it is the CHILD elements that will get the effect, NOT the element itself.

CSS Syntax:

perspective-origin: x-axis y-axis;

Where:

x-axis – defining where the view is placed at the x-axis (left, center, right, length, %). Default value: 50%.

y-axis – defining where the view is placed at the y-axis (top, center, bottom, length, %). Default value: 50%.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#element1 {
  position: relative;
  height: 100px;
  width: 100px;
  margin-left: 150px;
  margin-top:30px;
  border: 5px solid #2a9d8f;
  perspective: 100px;
  perspective-origin: right;  
}
#element2, #element4, #element6 {
  padding: 50px;
  position: absolute;
  border: 5px solid #e76f51;
  background-color: #e9c46a; 
  opacity:0.5;
  transform-style: preserve-3d;
  transform: rotateX(45deg);
}
#element3 {
  position: relative;
  height: 100px;
  width: 100px;
  margin-left: 150px;
  margin-top:60px;
  border: 5px solid #2a9d8f;
  perspective: 150px;
  perspective-origin: top left;
}
#element5 {
  position: relative;
  height: 100px;
  width: 100px;
  margin-top:60px;
  margin-left: 150px;
  border: 5px solid #2a9d8f;
  perspective: 100px;
  perspective-origin: -80%;  
}
</style>
</head>
<body>
<h4>perspective-origin: right:</h4>
<div id="element1">1
  <div id="element2">2</div>
</div>
<h4>perspective-origin: top left:</h4>
<div id="element3">3
  <div id="element4">4</div>
</div>
<h4>perspective-origin: -80%:</h4>
<div id="element5">5
  <div id="element6">6</div>
</div>
</body>
</html>

Output:

perspective-origin: right:

1
2




perspective-origin: top left:

3
4




perspective-origin: -80%:

5
6




3d Cube

Using all knowledge from above we can create now a 3d cube.

We can create cubes setting different perspectives. In the first example, the CSS perspective property is set to 200px, in the second example 900px.

Example1:

Perspective: 200px;

<!DOCTYPE html>
<html>
<head>
<style>

.cube-content {
  perspective: 200px;
}

.cube {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;
  background-color: #e9c46a;
  color: #264653;
  opacity:0.5;
  border: 1px solid #264653;
  text-align: center;
  line-height: 2em;
}

.front {transform: translateZ(1em);}
.top {transform: rotateX(90deg) translateZ(1em);}
.right {transform: rotateY(90deg) translateZ(1em);}
.left {transform: rotateY(-90deg) translateZ(1em);}
.bottom {transform: rotateX(-90deg) translateZ(1em);}
.back {transform: rotateY(-180deg) translateZ(1em);}
</style>
</head>
<body>

<div class="cube-content">
  <div class="cube">
  <div class="side front">1</div>
  <div class="side back">6</div>
  <div class="side right">4</div>
  <div class="side left">3</div>
  <div class="side top">5</div>
  <div class="side bottom">2</div>
  </div>
</div>

</body>
</html>

Output:

1
6
4
3
5
2




Example2:

Perspective: 900px:

<!DOCTYPE html>
<html>
<head>
<style>
.cube-container {
  perspective: 900px;
}

.cube {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;
  background-color: #e9c46a;
  opacity:0.5;
  border: 1px solid #264653;
  color: #264653;
  text-align: center;
  line-height: 2em;
}

.front {transform: translateZ(1em);}
.top {transform: rotateX(90deg) translateZ(1em);}
.right {transform: rotateY(90deg) translateZ(1em);}
.left {transform: rotateY(-90deg) translateZ(1em);}
.bottom {transform: rotateX(-90deg) translateZ(1em);}
.back {transform: rotateY(-180deg) translateZ(1em);}
</style>
</head>
<body>

<div class="cube-container">
  <div class="cube">
  <div class="side front">1</div>
  <div class="side back">6</div>
  <div class="side right">4</div>
  <div class="side left">3</div>
  <div class="side top">5</div>
  <div class="side bottom">2</div>
  </div>
</div>
</body>
</html>

Output:

1
6
4
3
5
2




Enjoy coding!

Read also:

CSS & jQuery 3d Cube

Roll the dice!

CSS Door Animation (Open/Close on Hover)