JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box rotate">
  transform with  
  <br> rotate(45deg)
</div>

<div class="box rotate3d">
  transform with  
  <br> rotate3d(1, 1, 1, 45deg)
</div>

<div class="box rotateX">
  transform with  
  <br> rotateX(60deg)
</div>

<div class="box rotateY">
  transform with  
  <br> rotateY(60deg)
</div>

<div class="box skew">
  transform with  
  <br> skew(20deg, 20deg)
</div>

<div class="box skewX">
  transform with  
  <br> skewX(20deg)
</div>

<div class="box skewY">
  transform with  
  <br> skewY(20deg)
</div>

CSS

.box {
  background-color: blue;
  color: white;
  padding: 20px;
  margin: 20px;
  display: inline-block;
  vertical-align: middle;
}

body {
  margin: 2em 3em;
}

.rotate {
  transform: rotate(45deg);
}

.rotate3d {
  transform: rotate3d(1, 1, 1, 45deg);
}

.rotateX {
  transform: rotateX(60deg);
}

.rotateY {
  transform: rotateY(60deg);
}

.skew {
  transform: skew(20deg, 20deg);
}

.skewX {
  transform: skewX(20deg);
}

.skewY {
  transform: skewY(20deg);
}