JSFiddle - React, Tailwind, and code Playground

by ianlunn

HTML

<div class="container">
    transform: scaleZ(1) translateZ(200px); 
    <div class="object"></div>
</div>

<div class="container container2">
    transform: scaleZ(2) translateZ(100px); 
    <div class="object"></div>
</div>

CSS

.container {
    background: #ccc;
    margin-bottom: 100px;
    padding: 10px;
    height: 120px;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -ms-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
    -webkit-perspective-origin: 0% 0%;
    -moz-perspective-origin: 0% 0%;
    -ms-perspective-origin: 0% 0%;
    -o-perspective-origin: 0% 0%;
    perspective-origin: 0% 0%;
}

.object {
    border: blue solid 1px;
    height: 100px;
    width: 100px;
    margin: 0 auto;
}

.object:after {
    background: blue;
    content: "";
    height: 100px;
    width: 100px;
    position: absolute;

    -webkit-transform: scaleZ(1) translateZ(200px);
    -moz-transform: scaleZ(1) translateZ(200px);
    -o-transform: scaleZ(1) translateZ(200px);
    -ms-transform: scaleZ(1) translateZ(200px);
    transform: scaleZ(1) translateZ(200px);
}

.container2 .object {
    border: red solid 1px;
}

.container2 .object:after {
    background: red;
    content: "";
    height: 100px;
    width: 100px;
    position: absolute;

    -webkit-transform: scaleZ(2) translateZ(100px);
    -moz-transform: scaleZ(2) translateZ(100px);
    -o-transform: scaleZ(2) translateZ(100px);
    -ms-transform: scaleZ(2) translateZ(100px);
    transform: scaleZ(2) translateZ(100px);
}