A CodePen by dommagnifico. Block Nav - Rotating Block Nav

index.html

<link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>

<div class="blocks">
  <a href="#">
    <div class="block">
      <div class="block--norm">
          <h2>Home</h2>
      </div>
      <div class="block--hover">
          <h2>Home</h2>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="block">
      <div class="block--norm">
          <h2>Work</h2>
      </div>
      <div class="block--hover">
          <h2>Work</h2>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="block">
      <div class="block--norm">
          <h2>About</h2>
      </div>
      <div class="block--hover">
          <h2>About</h2>
      </div>
    </div>
  </a>
</div>

style.scss

@import "compass";
*{
  font-family:'Lato', sans-serif; 
  font-size:100%;
}
html{
  background: #d4d4d4;
}
a{
  color:#2b2b2b;
  text-decoration:none;
}
.blocks {
  width:470px;
  margin:0 auto;
}
.block{
  position:relative;
  float:left;
  height:50px; width:33.333333%;
  font:{size:2em;};
  text-transform:uppercase;
  .block--norm{
    @include transform(rotateX(-90deg));
    background:#1a1a1a;
    color:#fefefe;
  }
  .block--hover{
    @include transform(rotateX(0deg));
    background:#ff0044;
  }
  &:hover {
   .block--norm{
      @include transform(rotateX(0deg));
    }
    .block--hover{
      @include transform(rotateX(90deg));
    }
  }
  div{
    position:absolute;
    top:0;
    padding:30px;
    box-shadow:0px 0px 40px rgba(47,47,47,.6) inset;
    -webkit-backface-visibility:hidden;
    -webkit-font-smoothing: antialiased;
    @include transition(400ms);
    @include transform-origin(50% 50% -75px);
  }
}