Pulsating 3D Game-like Menu

by Felype Rennan

HTML

<div class="game-menu-container">
<ul class="game-menu">
  <li class="game-menu-item"><a>Inicio</a></li>
  <li class="game-menu-item"><a>Portfolio</a></li>
  <li class="game-menu-item"><a>Sobre</a></li>
  <li class="game-menu-item"><a>Blog</a></li>
</ul>
</div>
<div class="background-anims">
  
</div>

SCSS

body {
  font: 'Verdana', sans-serif;
  background: #111;
  perspective: 100vh;
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 100vh;
  margin: 0;
  padding: 0;
}
.game-menu-container {
  margin-top: 20vh;
}
.game-menu {
  padding: 0;
  margin: 0;
  width: 50vw;
  margin-left: 25vw;
  animation: breathe 500ms ease-out alternate infinite;
  -webkit-transform-style: preserve-3d;
}

.game-menu-item {
  margin-top: 8px;
  display: block;
  padding: 8px 12px;
  font-size: 1.4em;
  margin-bottom: 4px;
  border: 1px solid #f2f2f2;
  color: #999;
  background: transparent;
  text-align: center;
  text-transform: uppercase;
  transition: 100ms ease-out;
  cursor: pointer;
  opacity: 0.5;
  > a {
    transition: transform 600ms ease-out;
    transform: scale(0.95);
    display: block;
    color: #f2f2f2;
  }
  &:hover {
    transform: scale(1.1);
    background: #eee;
    color: #555555;
    animation: flashing 0.4s linear alternate infinite;
    opacity: 1;
    > a {
      transform: scale(1.05);
      color: #111;
    }
  }
}

@-webkit-keyframes flashing {
  from {
    background-color: #FFF5F0;
  }
  50% {
    background-color: #F5F0FF;
  }
  to {
    background-color: #F0FFF5;
  }
}

@-webkit-keyframes breathe {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  2% {
    transform: scale(1.01);
    opacity: 0.8;
  }
  4% {
    transform: scale(1);
    opacity: 0.9;
  }
  96% {
    transform: scale(1.01);
    opacity: 1;
  }
  98% {
    transform: scale(1.02);
    opacity: 0.8;
  }
  to {
    transform: scale(1.01);
    opacity: 1;
  }
}

JavaScript

$(document).mousemove(function(event) {
	var incl = 0;
  inclX = -($(window).height() / 2);
  inclX += event.pageY;
  inclX /= $(window).height() / 2;
  inclX *= -20;
  inclY = -($(window).width() / 2);
  inclY += event.pageX;
  inclY /= $(window).width() / 2;
  inclY *= 20;
  $(".game-menu-container").css("transform", "rotateX("+inclX+"deg) rotateY("+inclY+"deg)");
});