JSFiddle - React, Tailwind, and code Playground

by Deepak Kumar

HTML

<div class='container'>
    <div id='flip1'>SOME TEXT</div>
</div>
<canvas id='canvas'></canvas>

CSS

.container {
    width :200px;
    height : 200px;
    background-color: yellowgreen;
    -webkit-perspective: 500px;
    display:inline-block;
    position: absolute;
}
#flip1 {
    background-color: green;
    width: 50%;
    height:100%;
    float:right;
    -webkit-transform-origin: 0% 50%;
    -webkit-transform: rotateY(-85deg);
    -webkit-transform-style: preserve-3d;
}
#canvas {
    width :200px;
    height : 200px;
    background:red;
    position: absolute;
}