JSFiddle - React, Tailwind, and code Playground

by Mohammed Ismail Ansari

HTML

<div id="div-one">
    
</div>

<div id="div-two">
    This is some text
</div>

CSS

body
{
    -webkit-perspective: 500;
}

#div-one
{
    margin-top: 50px;
    width: 200px;
    height: 100px;
    background-color: green;
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
}

#div-two
{
    margin-top: 50px;
    width: 400px;
    height: 100px;
    margin-left: 100px;
    color: White;
    background-color: Gray;
    font-size: 24pt;
    line-height: 100px;
    transform: rotate3d(1,0,0,60deg);
    -ms-transform: rotate3d(1,0,0,60deg);
    -webkit-transform: rotate3d(1,0,0,60deg);
}

JavaScript

// CSS3 Overview: Transforms