7

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

4

2 回答 2

4

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

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

于 2011-06-16T20:25:30.217 回答
2

浏览器元素目前仅限于占据一个平面。无论。<div>s一段时间以来，我一直在与模拟弯曲的想法搏斗，但没有取得显着进展。使用带有边框、边框半径和 matrix3d 的透明对象可以创建“弯曲”，但仅此而已。如果您仅指定border-top，并且设置了border-top-left-radius，您可以创建一条带有弯曲末端的直线。显然，这仍然是单个平面的一部分，沿其兄弟二维轴的方向弯曲。
一旦我们开始考虑将您的 2 维元素弯曲到它当前不占据的 3 维中，如果没有 Canvas、WebGL 或其他渲染引擎，这实际上是不可能的。

于 2012-10-24T05:06:46.110 回答