title: CSS3 3D bend perspective
body: <p>CSS3 3D transforms + animations are great. I'm wondering if there is a way to make something bend.</p>
  
  <p>This example flips the (paper) div but the animation looks stiff because, in real, when you flip paper, it bends a bit.</p>
  
  <p>So any properties I overlooked or maybe a combination that makes it look like it bends?</p>
  
  <pre><code>div {
      width: 90%;
      height: 700px;
      position: fixed;
      left: 5%;
      top: 0;
      background-color: rgba(0,0,0,0.9);
  
      -webkit-transform: perspective(1000);
      -webkit-transform-style: preserve-3d;
      -webkit-transform-origin: top;
      -webkit-animation: "page curl down" 1s ease-out forwards;
  }
  
  @-webkit-keyframes "page curl down" {
      from {
          -webkit-transform: rotate3D(1,0,0,180deg);
      }
  
      to {
          -webkit-transform: rotate3D(0,0,1);
      }
  }
  </code></pre>
  
  <p>Example page curl with bending (image): <a href="http://numerosign.com/software/css3machine/#documentation" rel="noreferrer">http://numerosign.com/software/css3machine/#documentation</a></p>