JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<article class=aboutMe-glass1-easeInOut500ms>
        <div id="thing"></div>
        <div id="matrixVal"></div>
     
    </article>










<script>
function changeRotate3D()
{
    var x=document.getElementById('3d-x-axis').value;
    var y=document.getElementById('3d-y-axis').value;
    var z=document.getElementById('3d-z-axis').value;
        var deg=document.getElementById('3d-deg').value;
    document.getElementById('police').style.transformOrigin=x + ', ' + y + ', ' + z + ', ' + deg +  'deg';
    document.getElementById('police').style.mstransformOrigin=x + ', ' + y + ', ' + z + ', ' + deg +  'deg';
    document.getElementById('police').style.webkitTransformOrigin=x + ', ' + y + ', ' + z + ', ' + deg +  'deg';
    document.getElementById('police').style.MozTransformOrigin=x + ', ' + y + ', ' + z + ', ' + deg +  'deg';
    document.getElementById('police').style.OTransformOrigin=x + ', ' + y + ', ' + z + ', ' + deg +  'deg';
    document.getElementById('-webkit-Rotate3D').innerHTML=x + ", " + y + ", " + z + ', ' + deg +  "deg";
    document.getElementById('-moz-Rotate3D').innerHTML=x + ", " + y + ", " + z + ', ' + deg +  "deg";   
    document.getElementById('-ms-Rotate3D').innerHTML=x + ", " + y + ", " + z + ', ' + deg +  "deg";   
    document.getElementById('-o-Rotate3D').innerHTML=x + ", " + y + ", " + z + ', ' + deg +  "deg";   
    document.getElementById('Rotate3D').innerHTML=x + ", " + y + ", " + z + ', ' + deg +  "deg";      
}


</script>



<section>
<div id="wrapper">
<div id="police" title="police"><img src="https://lh3.googleusercontent.com/-YVWd5mPnY8o/T1N5kdOwy2I/AAAAAAAAB1U/hjO2eMmcqPo/s353/police.jpg"/></div>
</div>



<article>
Rotate3D on the x y Z axis:<br />
X-axis:<input type="range" min="0" max="1" value="0" onchange="changeRotate3D()" id="3d-x-axis" /><br />
Y-axis:<input type="range" min="0" max="1" value="0" onchange="changeRotate3D()" id="3d-y-axis" /><br />
Z-axis:<input type="range" min="0" max="1" value="0"...

CSS

body{
 width:100%;
height:100%;
 overflow:hidden;  
background-color: rgba(12, 12, 12, .4);
background-image: -moz-linear-gradient(white 2px,transparent 2px),-moz-linear-gradient(0,white 2px,transparent 2px),-moz-linear-gradient(rgba(255, 255, 255, .3) 1px,transparent 1px),-moz-linear-gradient(0,rgba(255, 255, 255, .3) 1px,transparent 1px);
background-image: -webkit-linear-gradient(white 2px,transparent 2px),-webkit-linear-gradient(0,white 2px,transparent 2px),-webkit-linear-gradient(rgba(255, 255, 255, .3) 1px,transparent 1px),-webkit-linear-gradient(0,rgba(255, 255, 255, .3) 1px,transparent 1px);
background-image: -ms-linear-gradient(white 2px,transparent 2px),-ms-linear-gradient(0,white 2px,transparent 2px),-ms-linear-gradient(rgba(255, 255, 255, .3) 1px,transparent 1px),-ms-linear-gradient(0,rgba(255, 255, 255, .3) 1px,transparent 1px);
background-image: linear-gradient(white 2px,transparent 2px), linear-gradient(0,white 2px,transparent 2px), linear-gradient(rgba(255, 255, 255, .3) 1px,transparent 1px), linear-gradient(0,rgba(255, 255, 255, .3) 1px,transparent 1px);
background-size: 100px 100px,100px 100px,20px 20px,20px 20px;
background-position: -2px -2px,-2px -2px,-1px -1px,-1px -1px;        
}
* {
-webkit-font-smoothing: antialiased;
outline: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
li,ul li, li li{
list-style:none;
}
html, :root{
-khtml-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
-moz-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-o-text-size-adjust:100%;
text-size-adjust:100%;
}
h1, h2, h3, h4, h5, h6, p, .break-word , pre,code{
    text-rendering: optimizeLegibility;
    word-wrap: break-word;
    
}
[class*=glass1]{
    background-image: -khtml-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0%, rgba(244, 244, 244, 0.35) 50%, rgba(225, 225, 225, 0) 51%, rgba(246, 246, 246, 0) 100%);
background-image: -webkit-gradient(linear, left...

JavaScript

var el = document.getElementById("thing");
var st = window.getComputedStyle(el, null);
var tr = st.getPropertyValue("-webkit-transform") ||
         st.getPropertyValue("-moz-transform") ||
         st.getPropertyValue("-ms-transform") ||
         st.getPropertyValue("-o-transform") ||
         st.getPropertyValue("transform") ||
         "Either no transform set, or browser doesn't do getComputedStyle";
document.getElementById('matrixVal').innerHTML='-webkit-transform:' + tr +';';