JSFiddle - React, Tailwind, and code Playground

by mohsen

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>

<p>
    Rotate around line:
    <input type="number" id="x" value="0"/>x
    <input type="number" id="y" value="0"/>y
    <input type="number" id="z" value="0"/>z
     = 0; 
</p>
<div></div>

CSS

input[type="number"]{width:30px}
body{perspective: 820;}
div{width:300px; height:300px; border-radius:20px; margin:100px 40px; background:linear-gradient(#99f,white,#9f9); box-shadow:0 0 30px black, inset 0 0 400px gray;}

JavaScript

var r = 0;
setInterval(function(){
    var
    x = document.querySelector('#x').value,
    y = document.querySelector('#y').value,
    z = document.querySelector('#z').value,
    style = 'rotate3d(' + [x,y,z,''].join(',') + r++ + 'deg)';
    document.querySelector('div').style.webkitTransform = style;
}, 1000/60); //60fps