JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.6.1/gl-matrix-min.js"></script>
<input type="range" min=0 max=180 step=1 id='slider' value=0 />
<div class='parent' id="parent">
  <div id="container">


    <img id="img" />
  </div>
</div>

CSS

body {
  background: #ccc;
  padding-top: 50px;
  display: flex;
  flex-direction: column
}

.parent {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

img {
  /* width: 300px; */
}

canvas {
  margin-left: 10px;
}

#container {
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript

const containerProps = {
  width: 400,
  height: 400
};
const _setTransformRatio = function(rotationY) {
  var t = {
    rotationX: 0,
    rotationY: -90,
    scaleX: 1,
    scaleY: 1,
    scaleZ: 1,
    skewX: 0,
    skewY: 0,
    x: 0,
    xOffset: 0,
    xPercent: 0,
    y: 0,
    yOffset: 0,
    yPercent: 0,
    z: 0,
    zOrigin: 0,
  };
  t = {
    ...t,
    force3D: 'auto',
    perspective: 2000,
    rotationY,
    skewType: 'compensated',
    svg: false,
  };
  var angle = t.rotation,
    rotationX = t.rotationX,
    sx = t.scaleX,
    sy = t.scaleY,
    sz = t.scaleZ,
    x = t.x,
    y = t.y,
    z = t.z,
    isSVG = t.svg,
    perspective = t.perspective,
    skewY = t.skewY,
    skewX = t.skewX,
    t1,
    a11,
    a12,
    a13,
    a21,
    a22,
    a23,
    a31,
    a32,
    a33,
    a41,
    a42,
    a43,
    zOrigin,
    min,
    cos,
    sin,
    t2,
    transform,
    comma,
    zero;
  if (skewY) {
    //for performance reasons, we combine all skewing into the skewX and rotation values. Remember, a skewY of 10 degrees looks the same as a rotation of 10 degrees plus a skewX of 10 degrees.
    skewX += skewY;
    angle += skewY;
  }
  const _DEG2RAD = 0.017453292519943295;
  if (angle || skewX) {
    angle *= _DEG2RAD;
    cos = a11 = Math.cos(angle);
    sin = a21 = Math.sin(angle);
    if (skewX) {
      angle -= skewX * _DEG2RAD;
      cos = Math.cos(angle);
      sin = Math.sin(angle);
      if (t.skewType === 'simple') {
        //by default, we compensate skewing on the other axis to make it look more natural, but you can set the skewType to "simple" to use the uncompensated skewing that CSS does
        t1 = Math.tan((skewX - skewY) * _DEG2RAD);
        t1 = Math.sqrt(1 + t1 * t1);
        cos *= t1;
        sin *= t1;
        if (t.skewY) {
          t1 = Math.tan(skewY * _DEG2RAD);
          t1 = Math.sqrt(1 + t1 * t1);
          a11 *= t1;
          a21 *= t1;
        }
      }
    }
    a12 = -sin;
    a22 = cos;
  } else if...