JSFiddle - React, Tailwind, and code Playground

by Douglas Duhaime

HTML

<div class="original"></div>
<div class="transform-me"></div>
<div class="transformed"></div>

CSS

.original {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 50px;
  left: 50px;
  background: green;
}

.transform-me {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 50px;
  left: 50px;
  background: blue;
  z-index: 100;
  transform: matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  transform-origin: -50px -50px;
}

.transformed {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 100px;
  left: 100px;
  background: red;
}