Animated CSS3 Perspective Menu

Alt Text

Introduction

CSS3 is incredibly powerful and versatile. Recently I’ve been playing around with the perspective tools. It really opens up so many creative options. So I was thinking it would be cool to have a sidebar menu that when clicked would shift the perspective of the current window and slant it in a way that revealed the menu options.

Table of Contents

HTML
CSS
jQuery

HTML

The way to create this 3D effect is simple. You have a wrapper div with the CSS3 Perspective properties applied to it. Then a child container div has CSS3 Transforms which will transform it in proportion to the perspective.

  <div class="wrapper">
    <div class="menu">
      <div class="hover-icon">
        <i class="icon-align-justify"></i>      
      </div>
      <ul>
        <li class="category"><a href="#">HOME</a></li>
        <li class="category"><a href="#">SEARCH</a></li>
        <li class="category"><a href="#">ABOUT US</a></li>
        <li class="category"><a href="#">CONTACT US</a></li>
      </ul>
    </div>
    
    <div class="container">
      <div class="header">
        <a href="http://webdesigncrowd.com" class="btn">WebDesignCrowd <span class="btn"></span></a>
        <a href="http://webdesigncrowd.com/form-character-limit-animation-using-jquery-and-css" class="btn">Back to Article <span class="btn"></span></a>
        <h1>Perspective Sidebar</h1>
        <a href="index.html" class="btn active">Horizontal<span class="btn"></span></a>
        <a href="vertical.html" class="btn">Vertical<span class="btn"></span></a>
      </div>
      <img src="sintel-snowscape.jpg" width="600" />
    </div>
  </div>

CSS

This is the code for creating the perspective effect on the container. In the downloadable code, I provide the code to do a vertical effect and a horizontal effect.

.wrapper {
  height: 100%;
  -moz-perspective: 500;
  -webkit-perspective: 500;
  perspective: 500;
  -moz-perspective-origin: 50% 50%;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  overflow: hidden;
}
.container {
  position: relative;
  z-index: 1;
  background-color: #ddd;
  padding-top: 20px;
  text-align: center;
  height: 100%;
  margin-left: 40px;
  
  transition: .5s; 
  -webkit-transition: .5s; 
  -webkit-transform: rotateY(0deg) translateX(0) scale(1);
  transform: rotateY(0deg) translateX(0) scale(1);
}
  .container.perspective {
    -webkit-transform: rotateY(-15deg) translateX(250px) scale(.9);
    transform: rotateY(-15deg) translateX(250px) scale(.9);
  }

This is the code for styling the menu. The tricky part is having the menu on the same z-index while the container moves away revealing the menu options that are still clickable. I’m sure there are better ways of doing it and if there are feel free to let me know in the comments.

.menu {
  height: 100%;
  width: 40px;
  background-color: #444;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  cursor: pointer;
}
  .menu .hover-icon {
    position: relative;
    z-index: 10;
    font-size: 20px;
    width: 40px;
    height: 100%;
    text-align: center;
  }
    .menu .hover-icon i {
      position: absolute;
      width: 40px;
      top: 50%;
      left: 0;
      margin-top: -20px;
    }
  .menu ul {
    position: absolute;
    z-index: 0;
    left: 40px;
    top: 15%;
    width: 200px;
    height: 75%;
    margin-left: 10px;
  }
    .menu ul li {
      font-size: 12px;
      font-weight: bold;
      
      transition: .2s; 
      -webkit-transition: .2s;       
    }
    .menu ul li a { color: #ddd; }
      .menu ul li:hover { margin-left: 10px; }
      .menu ul li:hover a { color: #fff; }
      body.vertical .menu ul li:hover { 
        margin-left: 0; 
        background-color: #404040;
      }

jQuery

The jQuery only adds the perspective class to the container.

    $(".menu .hover-icon").click(function() {
      if ($(".container").hasClass("perspective")) {
        $(".container").removeClass("perspective");
      }
      else {
        $(".container").addClass("perspective");
      }
    });