3D Cube Rotate Menu

Introduction

A couple days ago I stumbled upon the insanely creative one page portfolio site FixedAgency. I instantly fell in love with the unique animations and feel of the website that I almost missed the beautiful sidebar menu. It has a sleek 3D cube rotation effect on each link in the menu. Basically, on hover the link is supposed to look like a 3D cube that rotates 90 degrees. This is achieved with CSS3 Transform Matrix 3D

HTML structure

Here is the general HTML structure for the sidebar. Each animated link is encompassed within a link anchor tag. Then the original state and the hovered state are represented by 2 span classes. The nested span classes are simply to create the vertical text look.

<div class="navbar">
  <a class="menu" href="#"><i class="icon-align-justify"></i></a>
  <a class="link" href="#">
    <span class="active"><span class="valign"><span class="vertical">HOVER</span></span></span>
    <span class="hover"><span class="valign"><span class="vertical">HOVER</span></span></span>
  </a>
  <a class="link" href="#">
    <span class="active"><span class="valign"><span class="vertical">HOVER</span></span></span>
    <span class="hover"><span class="valign"><span class="vertical">HOVER</span></span></span>
  </a>
  <a class="link" href="#">
    <span class="active"><span class="valign"><span class="vertical">HOVER</span></span></span>
    <span class="hover"><span class="valign"><span class="vertical">HOVER</span></span></span>
  </a>
</div>

CSS Effects

Here is the css for the menu. Don’t forget to add the transform-origin on the links you want to animate with matrix3d. Next using transitions I just alternate between the active and hover states on hover which creates the desired animation.

.navbar a.link span.active,
.navbar a.link span.hover {     
  display: table; 
  position: absolute;
  width: 100%;
  height: 100%;
  
  transform-origin: 0% 50% 0px;
  -webkit-transform-origin: 0% 50% 0px;
  transition: .2s; 
  -webkit-transition: .2s;   
  
  border-bottom: 1px solid #555;     
}
.navbar a.link span.active {
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  
  left: 0;
  background-color: #444;
}
  .navbar a.link:hover span.active {
    background-color: #999;
    transform: matrix3d(0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, 0, -50, 0, 0, 1);
    -webkit-transform: matrix3d(0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, 0, -50, 0, 0, 1);
  }
  .navbar a.link span.active .vertical { color: #aaa; 
    }
.navbar a.link span.hover {
  transform: matrix3d(0, 0, -1, 0.00166, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1);
  -webkit-transform: matrix3d(0, 0, -1, 0.00166, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1);
  
  left: 100%;
  background-color: #ccc;
}
  .navbar a.link:hover span.hover {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00166, -50, 0, 0, 1);
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00166, -50, 0, 0, 1);
  }

The post 3D Cube Rotate Menu appeared first on webdesigncrowd.com.