<div class="perspective-text">
</div>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fca311;
}

.perspective-text {
  position: relative;
  transform-style: preserve-3d;
  perspective:900px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.perspective-text:before, .perspective-text:after {
  position: absolute;
  content:"PERSPECTIVE";
  transition: .2s;
  font-size: 100px;
  font-family: arial;
  font-weight: 900;
  transform-style: preserve-3d;
  transform: rotateY(-55deg);
}
  
.perspective-text:after {  
  color: #14213d; 
  left:-355px;
}
.perspective-text:before {
  color: #e5e5e5;
  left:-348px;
}

.perspective-text:hover:before {
  transform: rotateY(55deg);
  color: #14213d; 
}

.perspective-text:hover:after {
  transform: rotateY(55deg);
  color: #e5e5e5;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.