JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div id="cssattr_translatex">translatex: </div>
<div id="cssattr_translatey">translatey: </div>
<div id="cssattr_translatez">translatez: </div>
<div id="cssattr_scalex">scalex: </div>
<div id="cssattr_scaley">scaley: </div>
<div id="cssattr_scalez">scalez: </div>
<div id="cssattr_rotatex">rotatex: </div>
<div id="cssattr_rotatey">rotatey: </div>
<div id="cssattr_rotatez">rotatez: </div>

<div class="in3D">
<div id="object" cssattr_translatex="0" cssattr_translatey="0" cssattr_translatez="0" cssattr_scalex="1" cssattr_scaley="1" cssattr_scalez="1" cssattr_rotatex="0" cssattr_rotatey="0" cssattr_rotatez="0"></object>
</div>

CSS

#object{
    width:100px;
    height:100px;
    background-color:#ff0000;
}
.in3D{
    -webkit-perspective:1000px;
    background-color:#000000;
    padding:50px;
    min-height:600px;
}

JavaScript

var labels = Array('translatex', 'translatey', 'translatez', 'scalex', 'scaley', 'scalez', 'rotatex', 'rotatey', 'rotatez');
var arr1 = Array(0, 0, 0, 1, 1, 1, 0, 0, 0);
var arr2 = Array(400, 300, -444, 4, 2, 2, 145, 145, 45);

// calculate timers

function calculate_timers(selector,labels,a1,a2,duration,step){
   
   // duration is animation length in ms
   // step is how often you want to run it during animation
   
   // loop through array
    
    var timers = Array();
    
    for(i=0;i<a1.length;i++){
        
        // get difference
        
        if((parseInt(a2[i]) - parseInt(a1[i])) != 0){
            
            // they are not the same so get the difference and figure out the 
            
            var d = parseFloat(parseFloat(a2[i]) - parseFloat(a1[i]));
            
            var t = parseFloat(duration/step);
            
            var inc = parseFloat(Math.abs(d)/t);
            
            var it = i;
            
            //alert(labels[i] + ' change by ' + inc + ' every ' + step + 'ms');
            
            // loop the timers
            
            var string_function = function(it,inc){
            
               var newvalue = parseFloat(parseFloat($(selector).attr('cssattr_' + labels[it])) + parseFloat(inc));
                
               newvalue = newvalue.toFixed(2);
                    
               $(selector).attr('cssattr_' + labels[it],newvalue);
               $('#cssattr_' + labels[it]).text(labels[it] + ": " + newvalue);
               $(selector).css('-webkit-transform','translateX(' + $(selector).attr('cssattr_translatex')+'px) translateY(' + $(selector).attr('cssattr_translatey')+'px) translateZ(' + $(selector).attr('cssattr_translatez')+'px) scaleX(' + $(selector).attr('cssattr_scalex')+') scaleY(' + $(selector).attr('cssattr_scaley') + ') scaleZ(' + $(selector).attr('cssattr_scalez')+') rotateX(' + $(selector).attr('cssattr_rotatex')+'deg) rotateY(' + $(selector).attr('cssattr_rotatey')+'deg)...