CSS3 perspective de pliage 3D

Question

CSS3 Transformations 3D + animations sont super. Je me demande s'il y a un moyen de faire plier quelque chose.

Cet exemple retourne le div (papier) mais l'animation semble rigide car, en réalité, lorsque vous retournez du papier, il se courbe un peu.

Donc toutes les propriétés que j'ai oubliées ou peut-être une combinaison qui donne l'impression qu'elle se plie?

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

Exemple de page avec boucle de pliage (image): http://numerosign.com/software/css3machine/#documentation

Answer 1

Non, la meilleure façon est d'utiliser la toile puis faites glisser une image à travers, comme ceci: http://www.20thingsilearned.com/. Voici une ventilation de la façon dont cela fonctionne: http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html

Il ya beaucoup de limitations avec cette méthode, mais c'est le meilleur que j'ai vu.

Answer 2

Les éléments du navigateur sont actuellement limités à occuper un seul plan. Peu importe ce que. Je me suis battu avec l'idée de simuler <div>s courbé pendant un certain temps sans progrès notable. L'utilisation d'un objet transparent avec une bordure, border-radius et matrix3d ​​peut créer des «bends», mais c'est à peu près tout. Si vous spécifiez border-top uniquement, avec le paramètre border-top-left-radius, vous pouvez créer une ligne droite avec une extrémité incurvée. Évidemment, cela fait toujours partie d'un seul plan plat, se pliant dans la direction de son axe bidimensionnel frère.
Dès que nous commençons à penser à plier votre élément bidimensionnel dans la 3ème dimension qu'il n'occupe pas actuellement, il devient littéralement impossible sans Canvas, WebGL ou d'autres moteurs de rendu.