Animation How to - Create pop up book effect with CSS animations

Question

We would like to know how to create pop up book effect with CSS animations.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#container {<!--from   w  w w  . j a  v  a 2s  .co m-->
  perspective: 600px;
}

#popup {
  transform: rotateX(90deg);
  transform-origin: bottom;
  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);}
}
</style>
</head>
<body>
  <div id="container">
    <img id="popup" src="http://www.java2s.com/style/download.png" width="200"
      height="200" />
  </div>
</body>
</html>

The code above is rendered as follows: