<ul class="block-menu">  
  <li><a href="/" class="three-d">  
  Главная  
  <span aria-hidden="true" class="three-d-box">  
  <span class="front">Главная</span>  
  <span class="back">Кто мы</span>  
  </span>  
  </a></li>  
  <li><a href="/demos" class="three-d">  
  Демо  
  <span aria-hidden="true" class="three-d-box">  
  <span class="front">Демо</span>  
  <span class="back">Ух ты!</span>  
  </span>  
  </a></li>  
  <!-- другие пункты меню -->  
</ul>

/* Основные стили меню */  
  .block-menu {  
   display: block;  
   background: #000;  
  }  

  .block-menu li {  
   display: inline-block;  
  }  

  .block-menu li a {  
   color: #fff;  
   display: block;  
   text-decoration: none;  
   font-family: 'Passion One', Arial, sans-serif;  
   font-smoothing: antialiased;  
   text-transform: uppercase;  
   overflow: visible;  
   line-height: 20px;  
   font-size: 24px;  
   padding: 15px 10px;  
  }  

  /* Анимация */  
  .three-d {  
   perspective: 200px;  
   transition: all .07s linear;  
   position: relative;  
   cursor: pointer;  
  }  
   /* Завершение анимации! */  
   .three-d:hover .three-d-box,   
   .three-d:focus .three-d-box {  
   transform: translateZ(-25px) rotateX(90deg);  
   }  

  .three-d-box {  
   transition: all .3s ease-out;  
   transform: translatez(-25px);  
   transform-style: preserve-3d;  
   pointer-events: none;  
   position: absolute;  
   top: 0;  
   left: 0;  
   display: block;  
   width: 100%;  
   height: 100%;  
  }  

  /*   
   Помещаем элементы "front" и "back" на место с помощью трансформаций CSS   
  */  
  .front {  
   transform: rotatex(0deg) translatez(25px);  
  }  

  .back {  
   transform: rotatex(-90deg) translatez(25px);  
   color: #ffe7c4;  
  }  

  .front, .back {  
   display: block;  
   width: 100%;  
   height: 100%;  
   position: absolute;  
   top: 0;  
   left: 0;  
   background: black;  
   padding: 15px 10px;  
   color: white;  
   pointer-events: none;  
   box-sizing: border-box;  
  }