.nav-item {
  text-decoration: none;
  font-family: sans-serif;
  font-size: 2em;
  color: white;
  background: orange;

  padding: 15px 50px;
  margin: 50px auto;
  display: block;
  position: relative;
  letter-spacing: 1.5px;
  text-shadow: 16px 0px 0 rgba(0, 0, 0, 0.1);
  transition: 0.2s ease-in-out;
  -webkit-transform: rotateY(-24deg);
  transform: rotateY(-24deg);
  -webkit-perspective: 600px;
  perspective: 600px;
  width: 500px;
  backface-visibility: hidden;
}

.wrap {
  -webkit-perspective: 600px;
  perspective: 600px;
  width: 500px;
  text-align: center;
    transition: 0.2s ease-in-out;
}

.wrap:hover, .wrap:hover .nav-item {
    -webkit-transform: rotateY(24deg);
  transform: rotateY(24deg);
  -webkit-perspective: 1600px;
  perspective: 1600px;
}

.nav-item:hover {
  text-shadow: -16px 0px 0 rgba(0, 0, 0, 0.1);
}