Tag: perspective-text

Demo:

To create the CSS Perspective Text Effect follow the steps below and watch the video tutorial:

1. Add HTML
2. Add CSS

Step1.

Add HTML

<div class="perspective-text"></div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fca311;
}

Style the text:

.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;
}

Add the hover effect:

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

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

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Mirror/ Reflection Text Effect

CSS Long Shadow Text Effect

CSS Tooltips