CSS3 3D弯曲角度 [英] CSS3 3D bend perspective

问题描述

CSS3 3D变换+动画是巨大的。我不知道是否有一种方法，使一些弯曲。

CSS3 3D transforms + animations are great. I'm wondering if there is a way to make something bend.

这个例子翻转（纸）格但动画看起来生硬，因为，在现实中，当你翻转纸张，它弯曲了一下。

This example flips the (paper) div but the animation looks stiff because, in real, when you flip paper, it bends a bit.

所以，我忽略了任何属性，或者一个组合，使得它看起来像它弯曲？

So any properties I overlooked or maybe a combination that makes it look like it bends?

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);
    }
}

为例卷页与弯曲（图）：<一href="http://numerosign.com/software/css3machine/#documentation">http://numerosign.com/software/css3machine/#documentation

推荐答案

没有。最好的办法是用帆布然后滑动图像对面，像这样： http://www.20thingsilearned.com/。以下是如何工作的一个细分： http://www.html5rocks.com/en /tutorials/casestudies/20things_pageflip.html

No. The best way is to use canvas then slide an image across, like this: http://www.20thingsilearned.com/. Here's a breakdown of how that works: http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html

有与法诸多限制，但它是我见过的最好的。

There are many limitations with that method, but it's the best I've seen.

这篇关于CSS3 3D弯曲角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！