JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card">
</div>
<div class="card cssTransform">
</div>
<div id="transformMe" class="card myTransform">
</div>

CSS

.card {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 100px;
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    background-color: green;
    border: solid 1px black;
}
.card.cssTransform {
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    
    background-color: red;
}
.card.myTransform {
    background-color: blue;
}

JavaScript

function matrixMultiply(a, b) {
        var result = [0, 0, 0, 0, 0, 0, 0, 0, 0];
        
        var a11 = a[0];
        var a12 = a[1];
        var a13 = a[2];
        var a21 = a[3];
        var a22 = a[4];
        var a23 = a[5];
        var a31 = a[6];
        var a32 = a[7];
        var a33 = a[8];
        
        var b11 = b[0];
        var b12 = b[1];
        var b13 = b[2];
        var b21 = b[3];
        var b22 = b[4];
        var b23 = b[5];
        var b31 = b[6];
        var b32 = b[7];
        var b33 = b[8];

        result[0] = a11*b11 + a12*b21 + a13*b31;
        result[1] = a11*b12 + a12*b22 + a13*b32;
        result[2] = a11*b13 + a12*b23 + a13*b33;

        result[3] = a21*b11 + a22*b21 + a23*b31;
        result[4] = a21*b12 + a22*b22 + a23*b32;
        result[5] = a21*b13 + a22*b23 + a23*b33;
        
        result[6] = a31*b11 + a32*b21 + a33*b31;
        result[7] = a31*b12 + a32*b22 + a33*b32;
        result[8] = a31*b13 + a32*b23 + a33*b33;
        
        return result;
    }
    
    function translate(m, x, y) {
        var n = [
            1, 0, x,
            0, 1, y,
            0, 0, 1
        ];
        
        return matrixMultiply(m, n);
    }
    
    function rotate(m, theta) {
        var n = [
            Math.cos(theta), -Math.sin(theta), 0,
            Math.sin(theta), Math.cos(theta), 0,
            0, 0, 1
        ];
        
        return matrixMultiply(m, n);
    }
    
    function matrixToCssTransform(m, ele) {
        var str = 'matrix('+m[0]+','+m[1]+','+m[3]+','+m[4]+','+m[2]+','+m[5]+')';
        $(ele).css({
            'transform': str,
            '-webkit-transform': str,
            '-ms-transform': str,
            '-moz-transform': str,
            '-o-transform': str,
        });
    }
    
    $(function() {
        var t = [1, 0, 0, 0, 1, 0, 0, 0, 1];
        
        t = translate(t, -50, -50);
        t = rotate(t, Math.PI/4);
        t = translate(t, 50, 50);
        
       ...