CSS3 3D弯曲透视

CSS3 3D转换+动画效果很好。我想知道是否有办法让事情变得弯曲。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

来源

2011-06-13 DADU

号的最佳方法是使用画布然后滑过的图像，如下所示：http://www.20thingsilearned.com/。下面是这种方法的细节：http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html

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

来源

2011-06-16 20:25:30

浏览器元素目前仅限于占用一个平面。无论。我一直在模拟曲线<div>s一段时间没有明显进步的想法。使用具有边框的透明对象，border-radius和matrix3d可以创建“弯曲”，但是就这一点而言。如果仅指定边框顶部，并且设置了边框顶部左半径，则可以创建具有弯曲末端的直线。显然，这仍然是一个单一的平面的一部分，弯曲在其兄弟二维轴的方向。
只要我们开始考虑在第三维中弯曲二维元素，它目前不占用，如果没有Canvas，WebGL或其他渲染引擎，它就会变得不可能。

来源

2012-10-24 05:06:46

CSS3 3D弯曲透视

回答

相关问题