JSFiddle - React, Tailwind, and code Playground

HTML

<input type="range" min="0" max="360"/>
<br />
<p>rotateY(45deg) rotate(45deg)</p>
<div class="stage">
    <div class="box">45</div>
</div>

CSS

body {
   padding:20px;   
}
.box {
    box-shadow: inset 0 0 15px red, 0px 0px 30px red;
    border-radius:4px;
    height:100px;
    width:100px;
    margin: 50px 50px;
    background: -webkit-linear-gradient(top, rgba(110,110,110,1) 0%,rgba(90,90,90,1) 100%);
    line-height:100px;
    text-align:center;
    color:rgba(220, 220, 220, 1);
    text-shadow:-2px -2px rgba(0, 0, 0, .2);
    font-size:50px;
    -webkit-transform:rotateY(45deg) rotate(45deg);
}

JavaScript

var rewrite = " rotate(45deg)"; // have to add or the transform is overwrote without it.
// rewrite = ""; // <---- uncomment to break the code

var input = $("input");
var box = $(".box");
var cssText = $("p");

input.on("change", function() {
    var val = input.val();
    box.html(val);
    var transformCSS = "rotateY(" + val + "deg)" + rewrite;
    box.css({
        "-webkit-transform": transformCSS
    });
    cssText.html(transformCSS);
});