<div class="perspective">
  <div class="box"></div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.box {
  background: blue;
  transition:500ms;
    width: 100%;
  height: 100%;
  transform-origin: 100% 100%;
}
.perspective {
  width: 200px;
  height: 200px;
  perspective:500px;
}
.box:hover {
  transform: rotateY(-30deg);
}