Treehouse

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.

ydkjs-6.png

Recent Features

  • Animated 3D Flipping Menu with CSS

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

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

Incredible Demos

  • JavaScript Battery API

    Mozilla Aurora 11 was recently released with a bevy of new features. One of those great new features is their initial implementation of the Battery Status API. This simple API provides you information about the battery's current charge level, its...

  • Image Reflection with jQuery and MooTools

    One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, "masthead" images is a classy enhancement. Unfortunately creating image reflections within your...

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.

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