CSS3 3D Curved Perspective

Question

CSS3 3D casts + animations are great. I am wondering if there is a way to do something bend.

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

So, any properties that I forgot, or maybe a combination that makes it look like its 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 of curling a page with a bend (image): http://numerosign.com/software/css3machine/#documentation

Answer 1

Not. The best way is to use the canvas and then shift the image, for example: http://www.20thingsilearned.com/ . It describes how this works: http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html

There are many limitations with this method, but this is the best I've seen.

Answer 2

Browser elements are currently limited to occupying one flat plane. No matter what. I struggled with the idea of ​​simulating <div>s curves for some time without noticeable progress. Using a transparent object with a border, border-radius and matrix3d ​​can create “bends”, but that's something like that. If you specify only the boundary vertex, with a radius setting with the upper left radius, you can create a straight line with a curved end. Obviously, this is still part of one plane plane, bending in the direction of its two-dimensional axis. As soon as we start thinking about bending your two-dimensional element in the 3rd dimension, which it does not currently occupy, it becomes almost impossible without Canvas, WebGL or other rendering mechanisms.