JSFiddle - React, Tailwind, and code Playground

by reinforceyourpotential

HTML

<section class="row" id="dice_canvas">

    <div class="col-lg-12">
        <div class="wrap">
            <div class="dice" id="number_location2">
                <div class="front">1</div>
                <div class="back">2</div>
                <div class="top">3</div>
                <div class="bottom">4</div>
                <div class="left">5</div>
                <div class="right">6</div>
            </div>
        </div>
    </div>

</section>

<section class="row" id="buttons">

    <div class="col-lg-12 font padding_btn">

        <button class="btn btn-info font" id="btn_roll" onClick="roll()">Rzuć Kostką</button>

    </div>

</section>

CSS

.dice {

    -webkit-transform-style: preserve-3d;
    position:relative;
    margin: 90px auto 90px auto;
    text-align:center;
    width:200px;
    height:200px;
    background:white;
    height:200px;           /* vertical align need this line <-----*/
    line-height: 200px;     /* and this line <-----                */

}

.animacja{
    -webkit-animation: trzesie;
    -webkit-animation-duration: 0.7s;

}

@-webkit-keyframes trzesie /* Safari and Chrome */
{
    /*
    0% {-webkit-transform: rotate(0deg); top:0px;}
    5% {-webkit-transform: rotate(45deg); top:-100px;}
    10% {-webkit-transform: rotate(0deg);}
    15% {-webkit-transform: rotate(-45deg);}
    20% {-webkit-transform: rotate(0deg);}
    25% {-webkit-transform: rotate(45deg);}
    30% {-webkit-transform: rotate(0deg);}
    35% {-webkit-transform: rotate(-45deg);}
    */
    from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(360deg); }
}
.back {
    background:url('grafika/1.jpg');
    background-size:100% 100%;
    transform: translateZ(-100px) rotateY(180deg);
    -webkit-transform: translateZ(-100px) rotateY(180deg);

}
.right {
    background:url('grafika/2.jpg');
    background-size:100% 100%;
    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
    -webkit-transform: rotateY(-270deg) translateX(100px);
    -webkit-transform-origin: top right;

}
.left {
    background:url('grafika/3.jpg');
    background-size:100% 100%;
    transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
    -webkit-transform: rotateY(270deg) translateX(-100px);
    -webkit-transform-origin: center left;

}
.top {
    background-color:gray;
    background-size:100% 100%;
    transform: rotateX(-90deg) translateY(-100px);
    transform-origin: top center;
    -webkit-transform: rotateX(-90deg) translateY(-100px);
    -webkit-transform-origin: top center;

}
.bottom {
    background-color:black;
    transform: rotateX(90deg)...

JavaScript

(function($){
    $.fn.extend({ 
        diceRoll: function(className, duration) {
            var elements = this;
            setTimeout(function() {
                elements.removeClass(className);
            }, duration);
            return this.each(function() {
                $(this).addClass(className);
            });
        }
    });
})(jQuery);

$("#btn_roll").click(function() {
    $("#number_location2").diceRoll('animacja', 2000);
 
});