JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

<div class="test"></div>

<button onclick="$('.test').changetransform({'scale': .5});">Scale .5</button> 
<button onclick="$('.test').changetransform({'scale': 1});">Scale 1</button><br/> 
<button onclick="$('.test').changetransform({'rotate': 120});">Rotate 120</button> 
<button onclick="$('.test').changetransform({'rotate': 0});">Rotate 0</button><br/> 
<button onclick="$('.test').changetransform({'translateX': 100});">Move X 100</button>
<button onclick="$('.test').changetransform({'translateX': 0});">Move X 0</button><br/>
<button onclick="$('.test').changetransform({'translateY': 100});">Move Y 100</button>
<button onclick="$('.test').changetransform({'translateY': 0});">Move Y 0</button><br/>

CSS

.test, .reference{
height:100px;
    width:100px;
    background:red;
    display:block;
        -webkit-transition: .8s ease all;
    -ms-transition: .8s ease all;
    -moz-transition: .8s ease all;
    -o-transition: .8s ease all;
    transition: .8s ease all;
}

JavaScript

$.fn.changetransform = function(options) { 
    if($(this).length === 0) return $(this);

    function matrixToArray(matrix) {
        return matrix.substr(7, matrix.length - 8).split(', ');
    }

    var transform;
    var current;

    current = $(this);

    transform = window.getComputedStyle($(this)[0]).webkitTransform || window.getComputedStyle($(this)[0]).mozTransform || window.getComputedStyle($(this)[0]).msTransform || window.getComputedStyle($(this)[0]).oTransform || window.getComputedStyle($(this)[0]).transform;

    if (transform === undefined || transform === 'none') transform = "matrix(1, 0, 0, 1, 0, 0)";
    transform = matrixToArray(transform);
        options = $.extend({
        'scale': Math.sqrt(transform[0] * transform[0] + transform[1] * transform[1]),
        'rotate': 180 *( Math.atan2(transform[1], transform[0])) / Math.PI,
        'translateX':transform[4],
        'translateY':transform[5]       
    }, options);

    transform[0] = parseFloat(Math.cos(options.rotate * (Math.PI / 180)).toFixed(20)) * options.scale;
        transform[1] = parseFloat(Math.sin(options.rotate * (Math.PI / 180)).toFixed(20)) * options.scale;
        transform[2] = parseFloat(-Math.sin(options.rotate * (Math.PI / 180)).toFixed(20)) * options.scale;
        transform[3] = parseFloat(Math.cos(options.rotate * (Math.PI / 180)).toFixed(20)) * options.scale;
        transform[4] = options.translateX;
        transform[5] = options.translateY;

    transform = ['matrix(', transform, ')'].join('');

    $(this).css({
        '-webkit-transform': transform,
        '-moz-transform': transform,
        '-ms-transform': transform,
        '-o-transform': transform,
        'transform': transform
    });

    return $(this);

};