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

- DADU

Answer 1

不是的。最好的方法是使用画布，然后滑动图像，就像这样：http://www.20thingsilearned.com/。以下是它的工作原理：http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html。

虽然这种方法存在许多限制，但这是我见过的最好的方法。

- Rich Bradshaw

Answer 2

目前浏览器元素仅限于占用单个平面。无论如何，我已经尝试模拟弯曲的<div>有一段时间了，但没有明显的进展。 使用具有边框、边框半径和matrix3d的透明对象可以创建“弯曲”，但这就是它的极限。如果您仅指定border-top，并设置border-top-left-radius，则可以创建具有弯曲端点的直线。显然，这仍然是单个平面的一部分，在其兄弟2维轴的方向上弯曲。
一旦我们开始考虑将您的二维元素弯曲到它当前未占据的第三维度中，除了Canvas、WebGL或其他渲染引擎外，这实际上是不可能的。

- Augie Gardner