如何解决CSS3 3D弯曲透视图
| 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
该方法有很多局限性,但这是我见过的最好的方法。
, 浏览器元素当前仅限于占用单个平面。无论。我一直在尝试模拟弯曲
<div>s
的想法,但是没有取得明显进展。
使用带有边框的透明对象,border-radius和matrix3d可以创建\“ bends \”,但这远不止于此。如果仅指定border-top,并设置了border-top-left-radius,则可以创建具有弯曲末端的直线。显然,这仍然是单个平面的一部分,沿其同级二维轴方向弯曲。
一旦我们开始考虑将二维元素折弯到当前不占据的3D维度,那么在没有Canvas,WebGL或其他渲染引擎的情况下,它实际上将变得不可能。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。