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.

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

Recent Features

Incredible Demos

  • Duplicate the jQuery Homepage Tooltips Using Dojo

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using Dojo. The XHTML The above HTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

  • Create Spinning, Fading Icons with CSS3 and MooTools

    A goal of my latest blog redesign was to practice what I preached a bit more;  add a bit more subtle flair.  One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.)  I...

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

  • Preventing Side Effects in JavaScript

    JavaScript is very dynamic these days but I still see a lot of legacy code, whether it be for optimal backward compatibility or simply that the code hasn't been maintained.  One of the practices that makes me cringe is coding that creates unwanted side effects.  What's a side...

  • Access Mac Camera by Command Line

    With all of my recent command line tutorials, I've really gotten excited about the shell's simplicity and realized the true power of using the underlying technology of pretty UIs.  Since I work from home, I spend a lot of time on video calls, so when...

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...