O'Reilly

Animated 3D Flipping Menu with CSS

By on  
3D Menu

CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet 3D CSS flip card, and much more.  Today's we'll create a simple but awesome 3D flipping menu as featured here!

The HTML

The HTML structure consists of a list with links, as you would expect from a navigation menu, however there are a few extra SPAN elements to aid the 3D effect:

<ul class="block-menu">
	<li><a href="/" class="three-d">
		Home
		<span aria-hidden="true" class="three-d-box">
			<span class="front">Home</span>
			<span class="back">Home</span>
		</span>
	</a></li>
	<li><a href="/demos" class="three-d">
		Demos
		<span aria-hidden="true" class="three-d-box">
			<span class="front">Demos</span>
			<span class="back">Demos</span>
		</span>
	</a></li>
	<!-- more items here -->
</ul>

Beside the basic A element, a series of SPANs are used to represent the "front" and "back" faces of the 3D box during animation.  Each should be given the same text as the A element.

The CSS

The animation centers around transitions and transforms.  The actual A element wont move -- the parent SPAN element will. Each inner SPAN is initialized to its position and doesn't change. Each element animates upward and backward, using CSS transforms and CSS transitions, though one is on the rotation back while the other animates up into view.

/* basic menu styles */
.block-menu {
	display: block;
	background: #000;
}

.block-menu li {
	display: inline-block;
}

.block-menu li a {
	color: #fff;
	display: block;
	text-decoration: none;
	font-family: 'Passion One', Arial, sans-serif;
	font-smoothing: antialiased;
	text-transform: uppercase;
	overflow: visible;
	line-height: 20px;
	font-size: 24px;
	padding: 15px 10px;
}

/* animation domination */
.three-d {
	perspective: 200px;
	transition: all .07s linear;
	position: relative;
	cursor: pointer;
}
	/* complete the animation! */
	.three-d:hover .three-d-box, 
	.three-d:focus .three-d-box {
		transform: translateZ(-25px) rotateX(90deg);
	}

.three-d-box {
	transition: all .3s ease-out;
	transform: translatez(-25px);
	transform-style: preserve-3d;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* 
	put the "front" and "back" elements into place with CSS transforms, 
	specifically translation and translatez
*/
.front {
	transform: rotatex(0deg) translatez(25px);
}

.back {
	transform: rotatex(-90deg) translatez(25px);
	color: #ffe7c4;
}

.front, .back {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: black;
	padding: 15px 10px;
	color: white;
	pointer-events: none;
	box-sizing: border-box;
}

If you want to a glimpse into which ways the front and back elements move (which I highly recommend you do), set one of them to display: none and hover over the element;  you'll see what role each plays in the animation.

The only downfall of this technique is the repeated menu label;  it's easy to duplicate from a technical perspective, but screen readers may read said text three times, even with the aria-hidden="true" directive.  The visual effect, however, is flawless in its style and silky smooth animation.  No JavaScript, Flash, or canvas needed to create this effect -- just a few simple CSS directives.  CSS animations...something to be very thankful for.

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • 5 HTML5 APIs You Didn&#8217;t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

Discussion

  1. This is a good approach but can be achieved even better using pseudo-elements, just like Webdesign Depot does for external links.
    You have a single span inside with a data-title attribute, and then set the content of the css pseudo element using attr(data-title). Rotate the pseudo element -90deg, then on hover you rotate the span 90deg thus exposing the pseudo element that was rotate -90deg, creating a rotating effect.

    • Only Firefox animates generated content at the moment, so this is the “safer” approach.

    • I actually have tried @browniefed’s suggestion on chrome 26.0.14 and safari 5.1.10, and it works! Don’t know about explorer, tho…
      http://codepen.io/nami_eiku/pen/sCeDw

  2. Chinwag

    Very clever code, no need for specific images!

    Similar to the menu by the great Soh Tanaka.

    Great job.

  3. Looks a lot like the http://www.pukkelpop.be menu

  4. Jesus

    @Tom Schuermans.

    It looks exactly like that one.

  5. Credit is provided….

  6. Really nice but it is not working in ie9 :(

  7. Kimberley D.C. Schroder

    Which CSS tags need vendor prefixes in this example?

    Thanks!

  8. Personally, I’ve never understood the reasoning behind this sort of effect ( besides showing off ;) ). I remember a similar version being popular a few years ago where on hover, the text would drop down from above.

    I think it would make more sense if something related but different from the text was revealed. For an example, an icon that when hovered rotates to reveal the text describing the icon. Thoughts?

  9. I like this animation, and I want to practice on my blog

  10. Now this is what I was looking for
    Just a small query
    Can you tell me how do I add hover and active color effect in this?

    Looking for answer

  11. Arjun

    The flipping effect is not working for me in chrome. But the demo in your website is working in all browsers.
    Can you please point me to some place where I can learn to make css3 animation work in all browsers (At least in Opera Chrome and Firefox).
    I tried adding webkit to each and every special css properties, but it doesn’t seems to be working.
    I really appreciate if you point me in right direction.

  12. Why on Mac in Firefox, Chrome 3D menu works perfectly… but on Windows only works in Firefox, in Chrome doesn’t work. I have the same version of Chrome on Mac and Windows… Chrome on Mac is better than Win version? :P

  13. Zayd

    can u pls make a dropdown list for at least to one of them

  14. Srinivas

    I copy pasted this code. I see the back background but the animation is not working. I am new to web programming and I wish to know how I specify the file is css3 or by other means so that I can get the animating effect ?

    • Make sure you add vendor prefixes to properties that need them, like transform and transition

  15. Srinivas

    The overflow appears for me. I changed the overflow attribute to hidden and the animation is not good. Can you please check with the code again. Thanks

  16. This good in Chrome and Mozilla Firefox. Whereas in IE6+ this will not work.
    Always use Jquery for the menu and will work in all browsers.

    http://www.freemenu.info/2013/06/js10.html

  17. Nice! I’ll have to work this into my jQuery menuFlip plugin, http://www.grimmdude.com/2011/08/11/jquery-menu-flip

    -G

  18. rajesh kumar

    Hi,
    Actually this effect looks gr8. but i need flip image automatically means with out mouse over also.
    please explain me how to do that….?

  19. borbor

    just something i added to this nice css code

    @ ".block-menu" li a line
    
    .block-menu li a {
                   outline: 0;
                   ....
    }
    

    disabling dirty dashed box when clicking the link

    :D

  20. Jessica

    Hello Everyone,
    I was playing with this menu and I thought it would be really neat to put an image of a wood plank behind the image so that it would look like parts of the plank were twisting. I tried adding the background image to the list items which works pretty well but the image is not seamless. If I don’t have a background color or image behind the list items the navigation 3d effect does not work well. Does anyone have any ideas or suggestions as to how I could make the image seamless?

  21. changing colors on flip would be more awesome. Thanks tho

  22. Hi David!

    Thank you very much for your code! It was really helpful for me when I needed to do a flip card in my site in a quick way!

    I hope you read this post, I wanted to ask you about the way you solved the problem, to know if you used the containers and the CSS in a particular way for a particular reason.

    I needed a simpler version (with not that many containers or that much CSS code) so I modified a little your version to suit up my needs.

    If you could take a look at it I would appreciate your thoughts on the code.

    Thanks again!

    Kev,

    CODE: http://jsfiddle.net/3r092wgf/

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...