JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="some_container">
    <div class="drag"></div>
  </div>
</div>

<div class="overlay"></div>

<br><br><br>

<button>rotate!</button>

CSS

body {
	padding: 20px
}

div {
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

.main {
	border: 1px dashed blue;
	padding: 15px;
}

.some_container {
	position: relative;
	background-color: green;
}

.overlay {
	background-color: red;
	position: absolute;
	left: 35px;
	top: 35px;
	z-index: 5
}

.drag {
	position: relative;
	width: 30px;
	height: 30px;
	background-color: lime;
	z-index: 10;
	cursor: move;
}

.rotated {
	transform: rotateZ(15deg);
}

.rotated .drag {
	background-color: yellow;
	transform: rotateZ(-15deg);
	position: relative;
	z-index: 100;
  transform-style: flat;
}

JavaScript

$(".drag").draggable();

$("button").click(function()
{
    $(".some_container").addClass("rotated");
});