CSS3 3D弯曲透视

Question

CSS3 3D变换+动画很棒.我想知道是否有办法让某些东西弯曲.

这个例子翻转了(纸质)div,但是动画看起来很僵硬,因为实际上,当你翻动纸张时,它会弯曲一点.

那么我忽略的任何属性,或者是一个让它看起来像弯曲的组合？

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

带弯曲的示例页面卷曲(图像):http://numerosign.com/software/css3machine/#documentation

Answer 1

不。最好的方法是使用画布，然后滑动图像，如下所示： http: //www.20thingsilearned.com/。以下是其工作原理的详细说明：http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html

该方法有很多限制，但这是我见过的最好的方法。