JSFiddle - React, Tailwind, and code Playground

HTML

<h1> its css3 transform effects</h1>

<div class="transform">  its 3d Transform (x=axis)</div><br />

<div class="transform2">  its 3d Transform (y=axis)</div><br />

<div class="transform3">  its 3d Transform (z=axis)</div><br />

</body></html>

CSS

.transform{background-color:#CC3333; color:#FFFFFF; width:100px; height:100px;

font-size:18px; text-align:center; transform: rotateX(317deg); border-radius:40px;}

.transform2{background-color:#6633CC; color:#FFFFFF; width:100px; height:100px;

font-size:18px; text-align:center; transform: rotatey(312deg);border-radius:40px;}

.transform3{background-color:#999933; color:#FFFFFF; width:100px; height:100px;

font-size:18px; text-align:center; transform: rotatez(130deg);border-radius:40px;}