JSFiddle - React, Tailwind, and code Playground

HTML

<div class='transformable ghost'>
  <h2>Move me with a matrix</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
    officia deserunt mollit anim id est laborum.
  </p>
</div>

<div id='move-me' class='transformable'>
  <h2>Move me with a matrix</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
    officia deserunt mollit anim id est laborum.
  </p>
</div>
<script>
    var MDN = MDN || {};

MDN.matrixArrayToCssMatrix = function (array) {
  return "matrix3d(" + array.join(',') + ")";
}

MDN.multiplyMatrixAndPoint = function (matrix, point) {
  
  //Give a simple variable name to each part of the matrix, a column and row number
  var c0r0 = matrix[ 0], c1r0 = matrix[ 1], c2r0 = matrix[ 2], c3r0 = matrix[ 3];
  var c0r1 = matrix[ 4], c1r1 = matrix[ 5], c2r1 = matrix[ 6], c3r1 = matrix[ 7];
  var c0r2 = matrix[ 8], c1r2 = matrix[ 9], c2r2 = matrix[10], c3r2 = matrix[11];
  var c0r3 = matrix[12], c1r3 = matrix[13], c2r3 = matrix[14], c3r3 = matrix[15];
  
  //Now set some simple names for the point
  var x = point[0];
  var y = point[1];
  var z = point[2];
  var w = point[3];
  
  //Multiply the point against each part of the 1st column, then add together
  var resultX = (x * c0r0) + (y * c0r1) + (z * c0r2) + (w *...

CSS

.transformable {
  width:200px;
  height:200px;
  overflow-y:scroll;
  background:#4cc;
  padding:10px;
  border:2px solid #333;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-100px;
  margin-top:-100px;
  transition: transform 500ms;
}
.transformable h2 {
  margin-top:0;
}
.ghost {
  opacity: 0.1;
  pointer-events:none;
}
.lesson-title {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0.7em;
  font-family: sans-serif;
  font-size: 1em;
  color: #888;
  font-weight: normal;
}
.lesson-title a {
	text-decoration: none;
	color: #668;
}
.lesson-title a:hover {
	color: #338;
}

JavaScript

function matrixArrayToCssMatrix(array) {
  return "matrix3d(" + array.join(',') + ")";
}

function multiplyMatrixAndPoint(matrix, point) {

  //Give a simple variable name to each part of the matrix, a column and row number
  var c0r0 = matrix[0],
    c1r0 = matrix[1],
    c2r0 = matrix[2],
    c3r0 = matrix[3];
  var c0r1 = matrix[4],
    c1r1 = matrix[5],
    c2r1 = matrix[6],
    c3r1 = matrix[7];
  var c0r2 = matrix[8],
    c1r2 = matrix[9],
    c2r2 = matrix[10],
    c3r2 = matrix[11];
  var c0r3 = matrix[12],
    c1r3 = matrix[13],
    c2r3 = matrix[14],
    c3r3 = matrix[15];

  //Now set some simple names for the point
  var x = point[0];
  var y = point[1];
  var z = point[2];
  var w = point[3];

  //Multiply the point against each part of the 1st column, then add together
  var resultX = (x * c0r0) + (y * c0r1) + (z * c0r2) + (w * c0r3);

  //Multiply the point against each part of the 2nd column, then add together
  var resultY = (x * c1r0) + (y * c1r1) + (z * c1r2) + (w * c1r3);

  //Multiply the point against each part of the 3rd column, then add together
  var resultZ = (x * c2r0) + (y * c2r1) + (z * c2r2) + (w * c2r3);

  //Multiply the point against each part of the 4th column, then add together
  var resultW = (x * c3r0) + (y * c3r1) + (z * c3r2) + (w * c3r3);

  return [resultX, resultY, resultZ, resultW];
}

// 將 float 轉成 number 避免出現 -1.23-e 這種值
const to = n => Number(n.toFixed(2))

var sin = Math.sin;
var cos = Math.cos;

// 答案
// figma 順時鐘 -45 -> (0, -70.71)
// figma 逆時鐘 45 -> (-70.71, 0)
//
// cx/y = current x, y 以左上角為準
function rotate(rotation, w, h, cx, cy) {


  // degree to radian
  var a = rotation * (Math.PI / 180)

	//
	var rotateZMatrix = [
	  cos(a), -sin(a),    0,    0,
	  sin(a),  cos(a),    0,    0,
	       0,       0,    1,    0,
	       0,       0,    0,    1
	];
	
  // 不管中心點位置，一律反推出左上角座標
  const diffX = w / 2
  const diffY = h / 2
  const x = -diffX
  const y = -diffY

  // 方型左上角距 (0, 0) 的距離，通常直接讀取方型的 (x, y) 就夠
  const...