JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<div class="rotation"></div>
<div class="translation"></div>
<div class="rottrans"></div>
<button class="scale">test</button>
<button class="skew-x">test</button>
<button class="skew-y">test</button>
<button class="skew">test</button>

CSS

div {
  margin-bottom: 10px;
  width: 100px;
  height: 50px;
  background: orange;
}
.rotation:hover {
  transform-origin: 130px -10px;
  transform: rotate(10deg);
}
.translation:hover {
  transform: translate(10px, -20%);
}
.rottrans:hover {
  transform: rotate(20deg) translate(-20px, 50px);
}
.scale:hover {
  transform: scale(-1, -1);
}
.skew-x:hover {
  transform: skewX(20deg);
}
.skew-y:hover {
  transform: skewY(20deg);
}
.skew:hover {
  transform: skew(20deg, 20deg);
}