JSFiddle - React, Tailwind, and code Playground

by fatihhayri

HTML

<div id="kapsul">
    <div class="bir">        
    </div>    
    <div class="iki">
        <h3>deneme</h3>
    </div>
</div>

CSS

body{ 
    margin:30px;     
}

#kapsul{
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(-20deg) rotateY(-30deg);
    position:relative;
}

#kapsul div.bir{
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px; 
    background:gray;   
}

#kapsul div.iki{
    position: absolute;
    top: 50px;
    left: 50px;    
    width:200px; 
    height:200px; 
    background:blue;
    opacity:0.3; 
    -webkit-transform: translateZ(50px);
    -moz-transform   : translateZ(50px);
    -ms-transform    : translateZ(50px);
    -o-transform     : translateZ(50px);
    transform        : translateZ(50px);    
}

h3{
    background-color:#fff
}