Question

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.

Answer 1

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.