jQuery Perspective Page View Navigation

Como vengo haciendo desde hace dias atrás traiendo pluguins jQuery para nuestras webs, hoy no será menos. Asi que aqui teneis el Persepctive Page View Navigation. Desde la entrada de Window Vista se ha puesto de moda las vistas en 3D, Pues con este plugin lo que conseguimos es esconder a un lado nuestra web para mostrar un menú. Éste plugin se puede editar y ampliar facilmente aunque ahora ya tiene incluidos bastantes efectos. No necesitas el Xampp para probarlo simplemente descarga el archivo y haz click en "index" y el plugin funcionará ya que utiliza CSS3 y JavaScript.

Demo:
http://tympanus.net/Development/PerspectivePageViewNavigation/index.html



Para hacer que funcione la estructura HTML tiene que ser asi:
[color=#000000][color=#000000]<div id="perspective" class="perspective effect-airbnb">
    <div class="container">
        <div class="wrapper"><!-- wrapper needed for scroll -->
            <!-- ... -->
        </div><!-- wrapper -->
    </div><!-- /container -->
    <nav class="outer-nav left vertical">
        <!-- ... -->
    </nav>
</div><!-- /perspective -->[/color][/color]
Este es el ejemplo de mover a la izquierda:
[color=#000000][color=#000000]
/* Effect Move Left */
.effect-moveleft {
    background: #f4f3f1;
}
 
.effect-moveleft .container {
    transition: transform 0.4s;
    transform-origin: 50% 50%;
}
 
.effect-moveleft .container::after {
    background: rgba(255,255,255,0.6);
}
 
.effect-moveleft.animate .container {
    transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
}
 
/* Fallback */
.no-csstransforms3d .effect-moveleft.animate .container {
    left: -75%;
}
 
/* Navigation */
.effect-moveleft .outer-nav a {
    color: #e86a32;
    opacity: 0;
    transform: translateX(100px) translateZ(-1000px);
    transition: transform 0.4s, opacity 0.4s;
}
 
.effect-moveleft .outer-nav a:hover {
    color: #333;
}
 
.effect-moveleft.animate .outer-nav a {
    opacity: 1;
    transform: translateX(0) translateZ(0);
}
 
.effect-moveleft.animate .outer-nav a:nth-child(2) {
    transition-delay: 0.04s;
}
 
.effect-moveleft.animate .outer-nav a:nth-child(3) {
    transition-delay: 0.08s;
}
 
.effect-moveleft.animate .outer-nav a:nth-child(4) {
    transition-delay: 0.12s;
}
 
.effect-moveleft.animate .outer-nav a:nth-child(5) {
    transition-delay: 0.16s;
}
 
.effect-moveleft.animate .outer-nav a:nth-child(6) {
    transition-delay: 0.2s;
}
 
.effect-moveleft.animate .outer-nav a:nth-child(7) {
    transition-delay: 0.24s;
}[/color][/color]
Y el menú que nos aparecerá:
[color=#000000][color=#000000]<nav class="outer-nav left vertical">
    <a href="#" class="icon-home">Home</a>
    <a href="#" class="icon-news">News</a>
    <a href="#" class="icon-image">Images</a>
    <a href="#" class="icon-upload">Uploads</a>
    <a href="#" class="icon-star">Favorites</a>
    <a href="#" class="icon-mail">Messages</a>
    <a href="#" class="icon-lock">Security</a>
</nav>[/color][/color]