【CSS】How to use transform to tilt the image diagonally while giving a stereoscopic effect when hovering | Demo page

.block {
  width: 300px;
  margin: 0 auto;
}

.block a {
  display: block;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.block a .box {
  position: relative;
  padding-top: 62.5%;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.block a .box:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transform: translateX(0) translateY(0);
  background: #000;
}

.block a .img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: url(/img/a.jpg) no-repeat center center;
  background-size: cover;
}

.block a:hover {
  perspective: 1000px;
}
.block a:hover .box {
  transform: rotateX(30deg) rotateY(-20deg) rotateZ(5deg);
}

.block a:hover .box:after {
  transform: translateX(20px) translateY(20px);
}

@media screen and (max-width:640px){
  .block {
    width: 100%;
  }
}