html – CSS3 3D弯曲视角

发布时间：2020-12-14 18:40:04 所属栏目：资源来源：网络整理

导读：CSS3 3D变换动画非常棒.我想知道是否有办法让某些东西弯曲. 这个例子翻转了(纸质)div,但是动画看起来很僵硬,因为实际上,当你翻动纸张时,它会弯曲一点. 那么我忽略的任何属性,或者是一个让它看起来像弯曲的组合？ div { width: 90%; height: 700px; position:

CSS3 3D变换动画非常棒.我想知道是否有办法让某些东西弯曲.

这个例子翻转了(纸质)div,但是动画看起来很僵硬,因为实际上,当你翻动纸张时,它会弯曲一点.

那么我忽略的任何属性,或者是一个让它看起来像弯曲的组合？

div {
    width: 90%;
    height: 700px;
    position: fixed;
    left: 5%;
    top: 0;
    background-color: rgba(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,180deg);
    }

    to {
        -webkit-transform: rotate3D(0,1);
    }
}

带弯曲的示例页面卷曲(图像)：http://numerosign.com/software/css3machine/#documentation

解决方法

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

这种方法有许多限制,但它是我见过的最好的.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!