JSFiddle - React, Tailwind, and code Playground

by amsardesai

HTML

angle: <input type="text" id="angle" value="30" /><br />
scaleX: <input type="text" id="scaleX" value="2" /><br />
scaleY: <input type="text" id="scaleY" value="2" /><br />
tranX: <input type="text" id="tranX" value="100" /><br />
tranY: <input type="text" id="tranY" value="100" /><br />
skewX: <input type="text" id="skewX" value="0" /><br />
skewY: <input type="text" id="skewY" value="0" /><br />

<div>hello</div>

<span id="list"></span>

CSS

div {
    width: 100px;
    height: 100px;
    border: 1px solid;
    background-color: #aaa;
    margin: 20px auto;
    -webkit-transition: .5s;
}

JavaScript

$(document).ready(changes);
$("input").bind("change keyup input",changes);


function changes() {
    // Input
    var angle = $("#angle").val();
    var scaleX = $("#scaleX").val();
    var scaleY = $("#scaleY").val();
    var skewX = $("#skewX").val();
    var skewY = $("#skewY").val();
    var tx = $("#tranX").val();
    var ty = $("#tranY").val();
    
    // Angle
    var m11 = round(Math.cos(rad(angle)));
    var m21 = round(-Math.sin(rad(angle)));
    var m12 = round(Math.sin(rad(angle)));
    var m22 = round(Math.cos(rad(angle)));
    
    // Scale
    m11 *= scaleX;
    //m21 *= round(Math.tan(skewY));
    //m12 *= round(Math.tan(skewX));
    m22 *= scaleY;
    
    // Output
    var cssstr = "matrix("+m11+","+m21+","+m12+","+m22+","+tx+","+ty+")";
    $("div").css("-webkit-transform", cssstr);
    var htmlstr = "[ "+m11+" "+m21+" "+tx+" ]<br />[ "+m12+" "+m22+" "+ty+" ]<br />";
    htmlstr += "rad: " + rad(angle);
    $("#list").html(htmlstr);
    
}

function round(number) {
    return Math.round(number*10000) / 10000;
}

function rad(deg) {
    return deg * Math.PI / 180;
}