louisdeb louisdeb - 11 months ago 76
CSS Question

Pop up book effect with CSS animations

So I want to make a pop-up book effect but in 2D only. (so NOT like the beercamp page).

Ideal results:

  • bottom of img stays in the same position

  • img starts invisible then is popped up (imagine it lying on its back, then being lifted up till it is vertical)

  • Item should not appear too (if possible) compressed

I've read into CSS animations, the closest animation I can find is

transform: rotateX(xdeg);

So I produced this to test it out:

<!doctype html>

<style type="text/css">

transform: rotateX(90deg);
animation-delay: 2s;
animation-duration: 3s;
animation-name: popupanim;
animation-iteration-count: infinite;
animation-direction: alternate;

@keyframes popupanim
from {
transform: rotateX(90deg);

to {
transform: rotateX(0deg);

<img id="popup" src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width=379px height=400px/>

The problem with this is that the bottom level of the image changes, and that the image is obviously compressed.
How could I improve this to meet my needs?

(also as a side not rotate3d(xdeg, ydeg, zdeg) does not produce any output, why?)

Answer Source

Add a container element and use the transform-origin property to make it pivot properly:

#container {
    display: inline-block;

    perspective: 600px;  /* Tweak this */

#popup {
    transform: rotateX(90deg);
    transform-origin: bottom;

Demo: http://jsfiddle.net/BEy9f/3/

You need to use a parent element (#container) to make the perspective work properly. Also, if the #popup isn't in the exact center of the element (which is why I put display: inline-block in there), it'll appear off-center in the animation.

Chrome supports 3D transformations as well, so you can add support by using the -webkit- prefix.