CSS3 3D变换动画非常棒.我想知道是否有办法让某些东西弯曲.
这个例子翻转了(纸质)div,但是动画看起来很僵硬,因为实际上,当你翻动纸张时,它会弯曲一点.
那么我忽略的任何属性,或者是一个让它看起来像弯曲的组合？
div {
width: 90%;
height: 700px;
position: fixed;
left: 5%;
top: 0;
background-color: rgba(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,180deg);
}
to {
-webkit-transform: rotate3D(0,1);
}
}
带弯曲的示例页面卷曲(图像)：http://numerosign.com/software/css3machine/#documentation
解决方法
不是.最好的方法是使用画布然后滑动图像,如下所示：
http://www.20thingsilearned.com/.以下是其工作原理的细分：
http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html
这种方法有许多限制,但它是我见过的最好的.
