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;
}
#wrapper.transform #shape {
    transform: perspective( 600px ) rotateY( -60deg );
    -webkit-transform: perspective( 600px ) rotateX( -60deg );
}
#wrapper.transform #inside {
    transform: translate(50px, 100px);
    -webkit-transform: translate(50px, 100px);
}
}

JavaScript

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