Perspective Page View Navigation

Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects.

From our sponsor: Reach inboxes when it matters most. Instantly deliver transactional emails to your customers.

Pushing the site content aside to reveal a navigation has certainly become a trend for mobile navigations. The approach reflects some practices in app design where “views” are shown with animations. We’ve experimented a bit and we’ve come up with a small set of effects that take the page and move it in 3D to reveal a navigation (or some other content if you like). What’s nice about this is that we literally put the site into perspective, allowing for an interesting view on the content and the navigation possibilities.

Please note that this is highly experimental, so let us know if you find any bugs or problems.

For the general effect to work, we need to wrap our page into a perspective wrapper. The main content container (that will get moved in 3D) and the navigation will be the two children immediate children of that wrapper:

<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">
		<!-- ... -->
</div><!-- /perspective -->

When we trigger the effect, we’ll need to change the position and overflow of the divisions to just show the current view. With a little trick we can hide the overflow but keep the scroll position by setting the “wrapper” top to the negative scrollTop value of the body.

Depending on which effect we have set as a class to the perspective wrapper, we’ll animate the container and the menu items once we click the trigger button. An example for an effect is the following, where we rotate and move the page to the left and make the navigation items appear consecutively with a slight delay on the right side:

/* 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;

We also added some example media queries that show how to resize or reposition the menu for smaller screens.

There are two styles for the menus which is a horizontal and a vertical one. Depending on where we push away the page, we’ll be using one of the orientations together with a position class:

<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>

The icons used in the demo are from the Typicons set by Stephen Hutchings and they are licensed under the CC BY-SA 3.0 license.

Here is how all the effects look like when the menu is visible and the page is pushed away:

Airbnb Effect:


Move Left:


Rotate Left:


Move Down:


Rotate Top:


Lay down:


We hope you like the effects and find them inspiring!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 121

Comments are closed.
  1. This is seriously awesome. I want to find a way to work this into some project somewhere down the line.

  2. The article doesn’t mention anything about javascript but I’m finding that you have to have the javascript file in order to operate correctly. Is this correct? Is there a way to do any of these effects without the javascript or is it dependent on both script files? I’ve tried going through it but this level of javascript is a little over my head.


  3. Fantastic design! It looks phenomenal. One question, how can I set this up so that when I push the home button (for example) I would get a reverse animation going back to the page; Just clicking on the actual page itself does. Thanks!

  4. I just noticed that when you open the menu and then get back to the original page by clicking the transformed image, the scroll bar disappears.

  5. Hi Mary,

    I’m a student enroll at UW, and currently, building my portfolio website (hope you don’t mind me using this jquery). First of all, just want to say this is awesome! Secondly, I was wondering for the Lay down effect, is it possible to have img and figcaption instead of text? So, I tried to do it, but it seems that it just become more horizontal. Are there a way to change the width of the outernav, so that I can fit some preview?

  6. Hi there,
    thanks for this awesome work, I have tiny problem with this when I try to apply this I’m getting “Uncaught TypeError: Cannot read property ‘addEventListener’ of null” error in “menu.js:46” I ready dont understand anything of js.. if you can help about it.. I will appreciate.
    Thanks for helping.

  7. Hello Mary,

    Thank you for all the great content you have shared with all of us!

    I’m new to web designing and I only have experience working with Joomla CMS system. Can anyone confirm if this great menu effect will work on a modern Joomla site? I’ve been banging my head against the wall here for the better part of a day trying to get it to work, only the .css seems to show correctly.

    I would even be grateful if someone can just confirm that it won’t work, just so I can move on. Before I do any more damage to my wall and head!

    Thanks in advance everyone!

  8. I am new to this. Could someone please tell me the specific code i have to paste and where? sorry for the hassle! I would really appreciate it, this effect is so awesome

  9. Does not work with CMS! -.-
    CSS Code is correctly, JS is checked and WordPress doesn’t allow it. Don’t know why…

  10. Hi Mary Lou,

    Thanks for the inspiration! Decided to build it myself to make it work in IE8.
    Keep up the good work!

  11. Hello…It is very nice, but i want to know how to link. When i click Home link, i arrive home page etc. i would like to know about that. thankyou

  12. Hi, I was just wondering how to change the colour of the background when the menu is clicked? I can’t seem to find it anywhere! thanks

  13. Hey guys, just spent 3 days working with this beautiful code to get it working on WordPress, but no luck. Has anyone gotten it to work on Drupal? Thanks.

  14. Congratulations! Great and nice work, buti has found a bug when we are using anchor links (like href=”#services”). When click on the link the page back to top, and don’t follow the anchor link. I has revised your js code and the problem is not there.

    Help, i’m lost in that issue.