I made a die-rolling animation based on switch statement. The die rotates from a start position (you see the front side - red, num 1) and ends up on a random side with the appropriate number on it from the animation.
I would like to make this animation more fluid upon re-rolls. The animation currently starts over suddenly from the original orientation on re-rolls, but I want it to start from the position it ended on its last roll
I tried to use CSS reverse to this animation just after click before next random number generation, but it didn't work.
cube.style.animation = kindaSpin + " 2500ms ease-in-out forwards reverse";
(the code is abbreviated on purpose):
var a = 1;
var cube = document.getElementById("cube");
var num = document.getElementsByClassName("num");
var kindaSpin;
var b; var c; var d; var randomNum; var randomNumStr;
function spin(){
/*RANDOM NUMBER*/
randomNum = Math.floor(Math.random() * 6) + 1;
randomNumStr = randomNum.toString();
for(i = 0; i < num.length; i++)
{num[i].style.animation = "";}
/*SWITCH*/
switch(randomNum) {
case 1:
kindaSpin = 'one';
a = "1";
break;
case 2:
kindaSpin = 'two';
a = "2";
break;
case 3:
kindaSpin = 'three';
a = "3";
break;
case 4:
kindaSpin = 'four';
a = "4";
break;
case 5:
kindaSpin = 'five';
a = "5";
break;
case 6:
kindaSpin = 'six';
a = "6";
break;
}
/*MOVE*/
cube.style.animationDirection = "normal";
cube.style.animation = kindaSpin + " 2500ms ease-in-out forwards";
/*NUMBER*/
setTimeout(() => { document.getElementById("num" + a).style.animation = "fadeIn 2s linear forwards";
; }, 2000); }@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@800&family=Indie+Flower&family=Teko:wght@500;600;700&display=swap');
:root {
--size: 50px;
--half-size: 25px;
--minus-half-size: -25px;
}
* {
box-sizing: border-box;
}
.content {
width: var(--size);
height: var(--size);
margin: 50px auto;
perspective: 1000px;
}
.cube {
position: relative;
transform-style:preserve-3d;
width: var(--size);
height: var(--size);
transform: rotateX(-20deg) rotateY(20deg);
}
/*CUBE SIDES*/
.face {
display: block;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
height: var(--size);
width: var(--size);
color: aliceblue;
font-family: 'Teko', sans-serif;
}
.one{
background-color: rgba(255, 0, 0, 0.356);
transform: translateZ(var(--half-size)); /*front*/
}
.two {
background-color: rgba(0, 128, 0, 0.349);
transform: translateY(var(--minus-half-size)) rotateX(-270deg) ; /*top*/
}
.three {
background-color: rgba(0, 0, 255, 0.315);
transform: translateX(var(--half-size)) rotateY(90deg); /*right*/
}
.four {
background-color: rgba(255, 255, 0, 0.384);
transform: translateX(var(--minus-half-size)) rotateY(-90deg); /*left*/
}
.five {
background-color: rgba(128, 0, 128, 0.342);
transform: translateY(var(--half-size)) rotateX(270deg); /*bottom*/
}
.six {
background-color: rgba(255, 140, 0, 0.37);
transform: translateZ(var(--minus-half-size)) rotateY(180deg); /*back*/
}
/*NUMBER*/
.num {
position:absolute;
display: block;
opacity: 0%;
}
/*ANIMATION OF ROTATION*/
@keyframes one {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(380deg) rotateZ(360deg);}
}
@keyframes two {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(610deg) rotateY(720deg) rotateZ(20deg);}
}
@keyframes three {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(290deg) rotateZ(360deg);}
}
@keyframes four {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(820deg);}
}
@keyframes five {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(790deg) rotateY(360deg) rotateZ(340deg);}
}
@keyframes six {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(200deg) rotateZ(360deg);}
}
@keyframes fadeIn {
0%{opacity: 0%;}
100%{opacity: 100%;}
}<div class="content" onclick="spin()">
<div class="cube" id="cube">
<div class="face one">
<div class="num" id="num1">1</div>
</div>
<div class="face two">
<div class="num" id="num2">2</div>
</div>
<div class="face three">
<div class="num" id="num3">3</div>
</div>
<div class="face four">
<div class="num" id="num4">4</div>
</div>
<div class="face five">
<div class="num" id="num5">5</div>
</div>
<div class="face six">
<div class="num" id="num6">6</div>
</div>
</div>
</div>Here is how the die looks in the final version with gifs: https://cumclavi.cz/cube/ ...it takes some time to load.