JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="body">
  <div class="box">
    <div class="box_"></div>
  </div>
</div>

CSS

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
div.body {
  width: 60%;
  height: 300px;
  background: red;
  margin: 100px auto;
  perspective: 300px;
}
div.box {
  width: 100%;
  height: 200px;
  margin: auto;
  /* background: url(http://picsum.photos/600/200) no-repeat; */
  background: yellow;
  background-size: cover;
  background-position: center;
  transform: rotateX(20deg);
  transform-style: preserve-3d;
  border: 1px solid black;
}
div.box_ {
  width: 50px;
  height: 50px;
  background: blue;
  opacity: .5;
  margin-left: 100px;
  transform: rotateX(-20deg) translateZ(6px) skew(0deg);
  transition: 1s;
  transform-origin: left bottom;
}
div.box_:hover {
  transform: rotateX(-0deg) translateZ(0px) skew(0deg);
}