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
}