html – CSS3 3D弯曲视角

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

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

总结

以上是内存溢出为你收集整理的html – CSS3 3D弯曲视角全部内容，希望文章能够帮你解决html – CSS3 3D弯曲视角所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。