JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div id="container">
<div id="transformed"></div>
</div>
</div>
CSS
#wrapper{
height: 400px;
width: 400px;
perspective: 800px;
-webkit-perspective: 800px;
}
#container{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 1s;
-webkit-transition: all 1s;
}
#transformed{
height: 400px;
width: 400px;
background: red;
transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
}
JavaScript
isTransformed=false;
transformed.onclick=function(){
if(isTransformed){
container.style.transform='';
container.style.webkitTransform='';
isTransformed=false;
}
else{
container.style.transform='rotateY(-70deg)';
container.style.webkitTransform='rotateY(-70deg) scale(1.5)';
isTransformed=true;
}
}