JSFiddle - React, Tailwind, and code Playground

HTML

</head><body><div.inner>Hover over each example to apply the matrix to the bottom object.<p></p>
<p id="m">Matrix :</p>
<h1>No skew, positive determinant</h1>
<div id="one"><div class="inner"><p>hello</p></div></div> 

<div id="two"><div class="inner"><p>hello</p></div></div>

<div id="three"><div class="inner"><p>hello</p></div></div>
<div id="four"><div class="inner"><p>hello</p></div></div>
<h1>No skew, negative determinant</h1>

<div id="five"><div class="inner"><p>hello</p></div></div>

<div id="six"><div class="inner"><p>hello</p></div></div>
<div id="seven"><div class="inner"><p>hello</p></div></div>
<div id="eight"><div class="inner"><p>hello</p></div></div>
<h1>Skew, negative determinant</h1>
<div id="nine"><div class="inner"><p>hello</p></div></div>
<div id="ten"><div class="inner"><p>hello</p></div></div>
<div id="eleven"><div class="inner"><p>hello</p></div></div>
<div id="twelve"><div class="inner"><p>hello</p></div></div>

<h1>Applied matrix</h1>
<div id="zero"><div class="inner"><p>hello</p></div></div>
</div.inner>

CSS

div { width: 100px; height: 100px }
div { margin: 1em; float: left; }
div.inner { margin: 0; float: none; background: blue; color: white; }
h1 { clear: both }
p { margin: 0; background: aqua; color: black }

@-moz-keyframes k1  {100% {  -moz-transform: matrix( 1,  0,  0,  1, 0, 0); } }
@-moz-keyframes k2  {100% {  -moz-transform: matrix(-1,  0,  0, -1, 0, 0); } } 
@-moz-keyframes k3  {100% {  -moz-transform: matrix( 0,  1, -1,  0, 0, 0); } }
@-moz-keyframes k4  {100% {  -moz-transform: matrix( 0, -1,  1,  0, 0, 0); } }
@-moz-keyframes k5  {100% {  -moz-transform: matrix( 1,  0,  0, -1, 0, 0); } }
@-moz-keyframes k6  {100% {  -moz-transform: matrix(-1,  0,  0,  1, 0, 0); } }
@-moz-keyframes k7  {100% {  -moz-transform: matrix( 0,  1,  1,  0, 0, 0); } }
@-moz-keyframes k8  {100% {  -moz-transform: matrix( 0, -1, -1,  0, 0, 0); } }
@-moz-keyframes k9  {100% {  -moz-transform: matrix( 1,0.5,  0, -1, 0, 0); } }
@-moz-keyframes k10 {100% {  -moz-transform: matrix(-1,0.5,  0,  1, 0, 0); } }
@-moz-keyframes k11 {100% {  -moz-transform: matrix( 0,  1,  1,0.5, 0, 0); } }
@-moz-keyframes k12 {100% {  -moz-transform: matrix( 0, -1, -1,0.5, 0, 0); } }

div#one    div.inner { -moz-animation: k1  5s infinite;  }
div#two    div.inner { -moz-animation: k2  5s infinite;  }
div#three  div.inner { -moz-animation: k3  5s infinite;  }
div#four   div.inner { -moz-animation: k4  5s infinite;  }
div#five   div.inner { -moz-animation: k5  5s infinite;  }
div#six    div.inner { -moz-animation: k6  5s infinite;  }
div#seven  div.inner { -moz-animation: k7  5s infinite;  }
div#eight  div.inner { -moz-animation: k8  5s infinite;  }
div#nine   div.inner { -moz-animation: k9  5s infinite;  }
div#ten    div.inner { -moz-animation: k10 5s infinite;  }
div#eleven div.inner { -moz-animation: k11 5s infinite;  }
div#twelve div.inner { -moz-animation: k12 5s infinite;  }

@-webkit-keyframes k1  {100% {  -webkit-transform: matrix( 1,  0,  0,  1, 0, 0); } }
@-webkit-keyframes k2  {100% { ...

JavaScript

/*(function () {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();

var s = "-webkit-transform";
var t = "webkitAnimationPlayState";
if (window.mozRequestAnimationFrame) s = "transform";
if (window.msRequestAnimationFrame) s = "-ms-transform";
if (window.mozRequestAnimationFrame) t = "animationPlayState";
if (window.msRequestAnimationFrame) t = "msAnimationPlayState";

var divs = document.getElementsByClassName("inner");
var pelement = document.getElementById("m");
var zerodiv = document.getElementById("zero");
var activeDiv = null;

function step(div) {
    if (!activeDiv) return;

    zerodiv.style[s] = window.getComputedStyle(activeDiv).getPropertyValue(s);
    requestAnimationFrame(step);
}

for (var x = 0; x < divs.length; x++) {
    divs.item(x).addEventListener("mouseover", function () {
        if (window.getComputedStyle(this).getPropertyValue(s) != "none") {
            pelement.textContent = "Matrix: " + window.getComputedStyle(this).getPropertyValue(s);
            activeDiv = this;
            requestAnimationFrame(step);
            //	if(!this.clicked) this.style[t] = "paused";
            //	zerodiv.style[s] = window.getComputedStyle(this).getPropertyValue(s);

        }
    }, false);
    divs.item(x).addEventListener("mouseout", function () {
        if (window.getComputedStyle(this).getPropertyValue(s) != "none") {
            activeDiv = null;
            //	if(!this.clicked) this.style[t] = "running";
        }
    }, false);

    divs.item(x).addEventListener("click", function () {
        if (this.clicked) this.clicked = false;
        else this.clicked = true;
    }, false);
}*/