JSFiddle - React, Tailwind, and code Playground

HTML

<button>transform</button>
<div class="wrap">
	<div class="stillObj"></div>
	<div class="objWrap">
		<div class="item item1"></div>
		<div class="item item2"></div>
		<div class="item item3"></div>
		<div class="item item4"></div>
		<div class="item item5"></div>
	</div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}

button {
    position: fixed;
    top: 50px;
    right: 20px;
    width: 100px;
    height: 60px;
    z-index: 500;
}

.wrap {
    background: #eee;
    height: 500px;
    width: 100%;
    position: relative;
}

.stillObj {
    background: #666;
    height: 450px;
    width: 30px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
}

.objWrap {
    height: 450px;
}

.item {
    background: blue;
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 220px;
}

.item1 {
    
}

.item2 {
    background: green;
    top: 30px;
    z-index: 60;
    width: 240px;
}

.item3 {
    background: red;
    z-index: 100;
    top: 60px;
}

.item4 {
    background: pink;
    top: 100px;
    width: 240px;
    z-index: 60;
}

.item5 {
    background: lime;
    top: 140px;
    z-index: 10;
}

.rotate {
  -webkit-transform: rotateZ(-15deg);
        transform: rotateZ(-15deg);
}

.item {
     -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

JavaScript

$('button').click(function(){
	$('.item').toggleClass('rotate');
});