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

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

Answer 2

浏览器元素目前仅限于占用单个平面。无论。我已经尝试过模拟弯曲<div>s一段时间没有取得显着进展的想法。使用带有边框的透明对象，border-radius和matrix3d可以创建＆＃34;弯曲＆＃34;，但这就是这样。如果仅指定border-top，并设置border-top-left-radius，则可以创建具有弯曲末端的直线。显然，这仍然是单个平面的一部分，在其兄弟二维轴的方向上弯曲一旦我们开始考虑在第三维中弯曲你的二维元素它当前不占用，如果没有Canvas，WebGL或其他渲染引擎，它就变得不可能了。

CSS3 3D弯曲透视

2 个答案: