JSFiddle - React, Tailwind, and code Playground

by Sarangi

HTML

<div>
Basic 2D block
</div> 



<div id="myDiv_translate">
The translate method
</div> 

<div id="myDiv_rotate">
The rotate method
</div>


 <div id="myDiv_scale">
This scale method
</div>               

<div id="myDiv_skewx">
Along x axis 20 degree.
</div>

<div id="myDiv_skewy">
Along x axis 20 degree.
</div>

CSS

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

div#myDiv_translate {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari */
    transform: translate(50px,100px); /* Standard syntax */
}
div#myDiv_rotate {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    -ms-transform: translate(50px,100px) rotate(20deg); /* IE 9 */
    -webkit-transform: translate(50px,100px) rotate(20deg); /* Safari */
    transform: translate(50px,100px) rotate(20deg); /* Standard syntax */
}

div#myDiv_scale {
    margin: 150px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    border: 1px solid black;
    -ms-transform: scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
    transform: scale(2,3); /* Standard syntax */
}

div#myDiv_skewx {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg); /* Standard syntax */
}


div#myDiv_skewy {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    -ms-transform: skewY(20deg); /* IE 9 */
    -webkit-transform: skewY(20deg); /* Safari */
    transform: skewY(20deg); /* Standard syntax */
}