JSFiddle - React, Tailwind, and code Playground

by Bateman

HTML

<div class="container">
  <div class="box"></div>
  <!-- <div class="box rotate"></div> -->  
  <div class="box rotate-translate"></div>
</div>

CSS

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  margin: 50px;
}

.box {
  border: 1px solid black;
  width: 100px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  transform: translate3d(30px, 20px, 0px);
}

.box::after {
   content: '';
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   width: 3px;
   height: 3px;
   background: red;
}

.rotate {
  transform: rotate(-45deg);
  border-color: green;
}

.rotate-translate {
  border-color: red;
  transform: translate3d(30px, 20px, 0px) translate(50%, 50%) rotate(-34.37deg) translate(-50%, -50%);
}