JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    <head>
        <title>3D Transform</title>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

CSS

body{
    -webkit-transform-style: preserves-3d;     
    -webkit-perspective: 500px;
}

body > *:nth-of-type(1){
    width: 300px;
    height: 300px;
    background: rgba(255,243,123,0.5);
    -webkit-transform: rotateX(200deg);
}

/*
    -webkit-transform
        translate3d(x, y, z), translateZ(z)
        scale3d(sx, sy, sz), scaleZ(sz)
        rotateX(angle), rotateY(angle), rotate3d(x, y, z, angle),
        perspective(p)
        matrix3d(…)
    -webkit-backface-visibility
    -webkit-transform-style
    -webkit-perspective-origin
    -webkit-perspective
    -webkit-transform-style
    -webkit-transform-origin
    -webkit-transform
*/