JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<!-- <div class="body">
  <div class="box">
    <h1>luka</h1>
    <div class="test"></div>
  </div>
</div> -->


<div id="demo">
  luka
</div>

CSS

body {
  margin: 0;
}
* {
  box-sizing: border-box;
  /* backface-visibility: hidden; */
}
div#demo {
  font-size: 40px;
  background: darkblue;
  width: 400px;
  margin: 100px auto;
  padding: 20px;
  color: white;
  transform: rotateX(40deg) skew(-10deg);
}
div.body {
  width: 400px;
  height: 200px;
  background: grey;
  margin: 100px auto;
   perspective: 200px;
}
div.box {
  width:200px;
  height: 0px;
  margin: 50px auto;
  background: red;
  transform: rotateX(20deg);
  position: relative;
  transform-style: preserve-3d;
}
div.test {
  width: 100%;
  height: 200px;
  position: absolute;
  z-index: -1;
  background: yellow;
}
h1 {
  transform: rotateX(0deg);
  transform-style: preserve-3d;
  z-index: 99;
  position: absolute;
}
h1:hover {
  transform: rotateX(-20deg)
}