JSFiddle - React, Tailwind, and code Playground

by Sarangi

HTML

<div>
This a normal div element.
</div>

<div id="myDiv">
Rotates at X axis
</div>
<br><br>
<div id="myDiv1">
This a normal div element.
</div>

<div id="myDiv2">
Rotates at Y axis
</div> 
<br><br><br>
<div id="myDiv3">
This a normal div element.
</div>

<div id="myDiv4">
Rotates at X axis
</div>

CSS

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv {
    -webkit-transform: rotateX(150deg); /* Safari */
    transform: rotateX(150deg); /* Standard syntax */
}

div#myDiv1 {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv2 {
    -webkit-transform: rotateY(150deg); /* Safari */
    transform: rotateZ(150deg); /* Standard syntax */
}

div#myDiv3 {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv4 {
    -webkit-transform: rotateZ(90deg); /* Safari */
    transform: rotateZ(90deg); /* Standard syntax */
}