Perspective Effect

by trentHarlem

HTML

<h2>"Perspective Effect"</h2>
<div class='parent'>
  <button class="child button">H</button>
  <button class="button child">O</button>
  <button class="child button">V</button>
  <button class="button child" >E</button>
  <button class="z-down button child">R</button>
</div>

CSS

body {
   position: absolute;
   font: 1.5rem system-ui;
   text-align: center;
   left: 10%;
 }

 .parent {
   position: relative;
   perspective: 60px;
   perspective-origin: top top;
   margin-left: auto;
   margin-right: auto;
 }

 .child {
   transform: rotateX(30deg);
 }

 .child:hover {
   /* transform: rotateY(30deg); */
   transform: translateY(2px);
 }

 .button {
   position: relative;   
   padding: 10px 20px;
   font-size: 3rem;
   text-align: center;
   cursor: pointer;
   outline: none;
   color: #fff;
   background-color: dodgerblue;
   border: 1px solid #777;
   border-radius: 50%;
   box-shadow: 0 7px #888;
   transform: rotateX(30deg);
   transition: all ease-in-out 0.3s;

 }

 .button:hover {
   background-color: #1e6ecf;
 }

 .button:active {
   background-color: #1e6ecf;
   box-shadow: 0 5px #666;
   
   /* transform: rotateX(60deg); */

   /* transform: translateY(2px); */
 }
 
.z-up {
  z-index: 2;
}
.z-down {
  z-index: -1;
}