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

  • Create a Sheen Logo Effect with CSS

    I was inspired when I first saw Addy Osmani's original ShineTime blog post.  The hover sheen effect is simple but awesome.  When I started my blog redesign, I really wanted to use a sheen effect with my logo.  Using two HTML elements and...

  • How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • MooTools PulseFade Plugin

    I was recently driven to create a MooTools plugin that would take an element and fade it to a min from a max for a given number of times. Here's the result of my Moo-foolery. The MooTools JavaScript Options of the class include: min: (defaults to .5) the...

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

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

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...

  • Copy a Directory from Command Line

    Copying a directory for the sake of backup is something I do often, especially when I'm trying to figure out why something isn't working when I use an external library.  I'll copy the directory structure as a backup, mess around with the original source until I find a solution,...

  • Hotjar &#8211; All-in-one Analytics and Feedback

    Website analytics are a massive business -- the more data you can collect with regard to your users' behaviors on your site, the more you can increase and maximise conversion...and increased conversion is always good.  Sometimes increase conversion means more money, improved user experience, viewer retention,...

  • Crafting a 3D React Carousel

    There is something in me that is amazed but beautiful 3D interfaces. And it doesn’t matter whether they’re functional like Gyroscope features menu, technology demonstrators like the amazing periodic table demo from famous or they’re artistic representation pushing the limits of...