JSFiddle - React, Tailwind, and code Playground

by Kheema Pandey

HTML

<div id="parent">
    <div id="container">
 “CSS 3D Transforms are an enhancement to CSS Transforms which provides transforms in three dimensions. Note that while ‘transform’ uses a three-dimensional coordinate system, the elements themselves are not three-dimensional objects. Instead, they exist on a two-dimensional plane (a flat surface) and have no depth.”
    </div>
</div>

CSS

#parent {
background-color:#f5f5f5;
perspective:500px;
-webkit-perspective:500px;
height:300px;
width:300px;
padding:8px;
}

div#container {
transform: rotateY(30deg); /* W3C */
-webkit-transform: rotateY(30deg); 
transform-origin: 50% 50% 0px;
transform: perspective(500px) rotateY(30deg);
backface-visibility: visible;

}