JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div>

</div>

CSS

@-webkit-keyframes matrix {
    0% {
        -webkit-transform: matrix(0,0,0,0,0,0);
        transform: matrix(0,0,0,0,0,0);
    }

    100% {
        -webkit-transform: matrix(var(--a), var(--b), var(--c), var(--d), var(--x), var(--y));
        transform: matrix(var(--a), var(--b), var(--c), var(--d), var(--x), var(--y));
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: matrix(0,0,0,0,0,0);
        transform: matrix(0,0,0,0,0,0);
    }

    100% {
        -webkit-transform: matrix(var(--a), var(--b), var(--c), var(--d), var(--x), var(--y));
        transform: matrix(var(--a), var(--b), var(--c), var(--d), var(--x), var(--y));
    }
}

div {
  height: 100px;
  width: 100px; 
  background: red;
  transform: matrix(var(--a),1,var(--c),0,0,0);
  --a: 0.1;
  --b: 1;
  --c: 1;
  --d: 1;
  --x: 1;
  --y: 1;
}