CSS3 3D bend perspectiva

Question

CSS3 3D transformaciones + animaciones son geniales. Me pregunto si hay una manera de hacer que algo se doble.

Este ejemplo voltea el div (en papel) pero la animación se ve rígida porque, en realidad, cuando se voltea el papel, se dobla un poco.

¿Alguna de las propiedades que he pasado por alto o tal vez una combinación que hace que parezca que se dobla?

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

Ejemplo enrollamiento de la página con la flexión (imagen): http://numerosign.com/software/css3machine/#documentation

Answer 1

No. La mejor manera es utilizar la lona después deslice una imagen a través de, como este: http://www.20thingsilearned.com/. Aquí hay un desglose de cómo funciona eso: http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html

Existen muchas limitaciones con este método, pero es lo mejor que he visto.

Answer 2

Los elementos del navegador están actualmente limitados a ocupar un solo plano plano. No importa qué. He luchado con la idea de simular curva <div>s durante algún tiempo sin avances notables. El uso de un objeto transparente con un borde, border-radius y matrix3d ​​puede crear "curvas", pero eso es todo lo que eso significa. Si especifica únicamente el borde superior, con el conjunto de bordes superior-radio izquierdo, puede crear una línea recta con un extremo curvo. Obviamente, esto sigue siendo parte de un único plano plano, doblándose en la dirección de su eje bidimensional hermano.
Tan pronto como comencemos a pensar en doblar su elemento bidimensional en la 3ª dimensión que actualmente no ocupa, literalmente se vuelve imposible sin Canvas, WebGL u otros motores de renderizado.