CSS3 3D bend perspective

Question

CSS3 3D transforms + animations are great. I'm wondering if there is a way to make something bend.

This example flips the (paper) div but the animation looks stiff because, in real, when you flip paper, it bends a bit.

So any properties I overlooked or maybe a combination that makes it look like it bends?

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);
    }
}

Example page curl with bending (image): http://numerosign.com/software/css3machine/#documentation

Answer 1

No. The best way is to use canvas then slide an image across, like this: http://www.20thingsilearned.com/. Here's a breakdown of how that works: http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html

There are many limitations with that method, but it's the best I've seen.

Answer 2

Browser elements are currently limited to occupying a single flat plane. No matter what. I've wrestled with the idea of simulating curved <div>s for some time with no notable progress. Using a transparent object with a border, border-radius and matrix3d can create "bends", but that's about as far as that goes. If you specify border-top only, with border-top-left-radius set, you can create a straight line with a curved end. Obviously, this is still part of a single flat plane, bending in the direction of its sibling 2-dimensional axis.
As soon as we begin thinking of bending your 2-dimensional element in the 3rd dimension it does not currently occupy, it literally becomes impossible without Canvas, WebGL, or other rendering engines.