JSFiddle - React, Tailwind, and code Playground

by Ryan Mitchell

HTML

<button id="rotateButton">Rotate</button>
<div id="wrapper">
    <div id="shape"></div>
    <div id="inside">
        Some content.
    </div>
</div>

CSS

#wrapper {
    position: relative;
}
#shape {
    height: 300px;
    width: 300px;
    background: red;
    color: #511;
    position: absolute;
    z-index: -1;
}
#shape.transform {
    transform: perspective( 600px ) rotateY( -60deg );
    -webkit-transform: perspective( 600px ) rotateX( -60deg );
}

JavaScript

$("#rotateButton").click(function() {
    $("#shape").toggleClass("transform");
});