JSFiddle - React, Tailwind, and code Playground

by Andrew Page

HTML

<div id="start">start</div>
<div id="end">end</div>
<div id="animateMe">animate me</div>

CSS

html,
        body {
          height: 100%;
          width: 100%;
          perspective: 3.2em;
        }
        
        div {
          display: block;
          position: absolute;
          left: 50%;
          top: 25%;
          width: 100px;
          height: 200px;
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
          -webkit-backface-visibility: hidden;
          -moz-backface-visibility: hidden;
          backface-visibility: hidden;
          -webkit-perspective-origin: 50%;
          -moz-perspective-origin: 50%;
          perspective-origin: 50%;
          background-color: #ccc;
        }
        
        #start {
          transform: translateX(10px) rotate3d(.1, 0, .5, 60deg);
          background-color: transparent;
          border: 1px solid #000;
        }
        
        #end {
          transform: translateY(80px) rotate3d(0, 0, .1, 160deg);
          background-color: transparent;
          border: 1px solid #000;
        }

JavaScript

HTMLElement.prototype.get3dMatrixArray = function() {
      var st = window.getComputedStyle(this, null),
        mx = (st.getPropertyValue("transform") || st.getPropertyValue("-o-transform") || st.getPropertyValue("-ms-transform") || st.getPropertyValue("-moz-transform") || st.getPropertyValue("-webkit-transform") || 'none').replace(/\(|\)| |"/g, ''),
        arr = [];
      if (mx.indexOf('matrix3d') > -1) {
        arr = mx.replace('matrix3d', '').split(',');
      } else if (mx.indexOf('matrix') > -1) {
        arr = mx.replace('matrix', '').split(',');
        arr.push(0, 1);
        [2, 3, 6, 7, 8, 9, 10, 11].map(function(i) {
          arr.splice(i, 0, 0);
        });
      } else return mx;
      return arr.map(function(v) {
        return parseFloat(v)
      });
    };

    HTMLElement.prototype.set3dMatrix = function(mx) {
      if (Object.prototype.toString.call(mx) === '[object Array]')
        this.style.webkitTransform = this.style.msTransform = this.style.MozTransform = this.style.OTransform = this.style.transform = 'matrix3d(' + mx.join(",") + ')';
      return this;
    };

    HTMLElement.prototype.matrixTweenArray = function(endEl, steps) {
      function _tween(b, a, e) {
        b = b.get3dMatrixArray();
        var f = a.get3dMatrixArray();
        a = [];
        for (var c = 1; c < e + 1; c++) {
          var d = -1;
          a.push(b.map(function(v) {
            d++;
            return v != f[d] ? v - (v - f[d]) / e * c : v;
          }));
        }
        return a;
      }

      return _tween(this, endEl, steps);
    };

    HTMLElement.prototype.matrixAnimmate = function(matrixArr) {
      var that = this,
        pointer = 0;

      function _frameloop() {
        that.set3dMatrix(matrixArr[pointer]);
        pointer++;
        pointer === matrixArr.length && (pointer = 0);
        requestAnimationFrame(_frameloop);
      }

      requestAnimationFrame(_frameloop)
    };

    var mxArr =...