I'm making a ecard. When the user clicks the card, it will open and show its contents. How do I make this in CSS and javascript? I am using perspective and rotation, as you can see here. If you know an example that looks like what I'm trying to do, please post the link.

I'm making a ecard. When the user clicks the card, it will open and show its contents. How do I make this in CSS and javascript? I am using perspective and rotation, as you can see here. If you know an example that looks like what I'm trying to do, please post the link.

• javascript
• css
• css-transforms

• This. I can't figure out how to organize the divs. – José Morais Commented May 31, 2012 at 14:40
• 1 @J.Morais - OK, try absolute positioning and z-index. This link (w3schools./Css/css_positioning.asp) has a nice explanation of positioning. – RustyTheBoyRobot Commented May 31, 2012 at 14:42
• Done. Now how I can put the yellow pane as the back of the red one? – José Morais Commented May 31, 2012 at 14:48
• @J.Morais - I'm using Firefox, so I added CSS for the -moz styles. I also changed your animation to only iterate once instead of infinitely. I moved the perspective style to a parent element. It opens once, but then shuts again. We'll need to keep debugging. (jsfiddle/RustyTheBoyRobot/pYJm6/29) – RustyTheBoyRobot Commented May 31, 2012 at 15:42

2 Answers 2

Here's the solution that I've played with:

1. Create a style that does the rotation animation.
2. Create a style for the end result of the animation (basically the same as your to section in the animation style.
3. Create a button or trigger to add the rotation style to your <div>
4. Set a timeout in JavaScript for the same duration as your animation.
5. Once the timeout triggers, remove the animation style and add the end result style

Here's a modification of your jsFiddle. Getting the back side to work had a few quirks. The backside has to be positioned so that its right edge lines up with the front side's left edge. Then, you must rotate the back side -180 degrees so that it starts out behind the front page. Also, I had to switch the z-indexes once the animation had reached the midpoint.

All of this is hard to explain here, so I devoted an entire blog post to it. I created a bunch of visuals to help make it clear.

There's also a more simple solution to work with; instead of switching z-indexes with a timer, you just need to specifiy that elements have no backside (-webkit-backface-visibility: hidden), and flip the yellow card 180 degrees, so its back touches the red backside.

This way, you only need to flip the container containing oth the yellow and red cards, which can be done by adding a class (e.g. class="card opened").

Here's your example code with these changes: http://jsfiddle/pYJm6/90/