O'Reilly

CSS 3D Folding Animation

By on  
CSS 3D Animation

Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate their map fold-in effect. This effect uses 3D CSS animations which makes the animation even more sexy, and to make it red host, the animation requires no JavaScript!

The HTML

There's a series of HTML elements that need to be in place to accomplish the effect and keep the content in place:

<div id="container">
	<div class="parent1">
		<div class="parent2">
			<div class="parent3">
				<!-- Content goes here -->
			</div>
		</div>
	</div>
</div>

The first parent element will define 3D state, the second parent element will contain the fully viewable code during the animation, and the third parent is the most visibly different during the animation progress.

The CSS

The CSS to complete this animation is quite interesting, and there's probably less of it than you'd think:

/* Static state */
#container 	{ 
	width: 400px; 
	height: 400px; 
	position: relative; 
	border: 1px solid #ccc; 
}
.parent1 	{ 
	/* overall animation container */
	height: 0; 
	overflow: hidden;

	transition-property: height;
	transition-duration: 1s;
	perspective: 1000px;
	transform-style: preserve-3d;
}
.parent2	{ 
	/* full content during animation *can* go here */ 
}
.parent3	{ 
	/* animated, "folded" block */
	height: 56px; 
	transition-property: all; 
	transition-duration: 1s;
	transform: rotateX(-90deg);
	transform-origin: top; 
}

/* Hover states to trigger animations */
#container:hover .parent1	{ 
	height: 111px; 
}
#container:hover .parent3	{
	transform: rotateX(0deg); 
	height: 111px; 
}

The static state of parent1 sets the 3D transform and perspective states, starting at 0px height. The static state of parent3 sets the transition and transformation of the rotation. Upon hover the parent1 and parent3 heights are animated to full height, 111px in this case, and rotated to 0deg, i.e. a front-facing state.

I get the feeling we'll be seeing a lot more of this animation in the future; a folding billboard is a nice effect and takes very little space. As evidenced above, there's also very little CSS required so there's a large payoff for so little code. I do think this effect looks better when an image is animated in -- it's easier to visually see the transform.

Track.js Error Reporting

Recent Features

Incredible Demos

  • CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

  • dwProgressBar v2:  Stepping and Events

    dwProgressBar was a huge hit when it debuted. For those of you who didn't catch my first post, dwProgressBar is a MooTools 1.2-based progress bar which allows for as much flexibility as possible. Every piece of dwProgressBar can be controlled by CSS...

Discussion

  1. Virendra Rajput

    Awesome effect David !! And the blocks example doesnt aeem to have an picture in it.

    Thanks for sharing it

  2. George

    A seriously nice and easy script. Cheers!

  3. Thats freaking awesome bro!

  4. WOW, that was so simple. I expected there to be a more code than that. Thanks David :)

  5. Several days ago I found a tutorial about how to recreate the stream as viewed on tablets – it was a basic demo, not the full experience, only two columns with content, flying in the page on scrolling down, but it might be combined with that one.

    Unfortunately I lost the link to the other tutorial :( If someone knows what I am talking about, know how to find it or have it, please, share it :-)

  6. Zsombor Markus

    It’s really nice, but I would not rely much on mouse hover anymore, until “pointer” type media-query becomes widely supported.

  7. That is freaking awesome! Do you know any script gallery with more stuff like this to test out?

    • Some Guy

      I would also like to know!

  8. zz

    great job~~~~~~

  9. Hi David. Trying to achieve the Metro UI Flip effect. Any suggestions!!. It seems I could take something from this Demo

  10. Mulet

    you’re the man david!

  11. This is awesome.. Thanks David !

  12. Dude — check out oridomi.com

  13. iSimon

    David, in Firefox you need to preserve-3d also on “.parent2″, “.text-parent2″ and “.slow-parent2″:

    .parent2, .text-parent2, .slow-parent2 {
        -moz-transform-style: preserve-3d;
    }
    

    p.s. it seems that Firefox don’t need its vendor prefix anymore on “transform-style” and “perspective” :D

  14. krishna

    doesn’t work as intended for me

    where do you insert image i mean in your example your image
    i tried but it only shows david walsh is epic

  15. Nick

    Thanks for this cool tutorial – I had a question – is it possible to have the folding box fold up from the BOTTOM of the image? It seems height changes of divs in CSS always take place at the TOP of the parent container. Is there a clever way to have this effect but from the bottom of the parent container?

    Thanks,

    Nick

  16. Nice.
    Good Job.

  17. Arjun

    David, Nice CSS effect.

    I tried to copy your CSS. I put my content in within #container div and outside of #parent1 div. Now it folds after the content, not from the top of it.

    Where do you put your content ?

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

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...

  • OSCON Portland:  Conference Giveaway and Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

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