CSS3 3D弯曲透视图
|
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);
}
}
没有找到相关结果
已邀请:
2 个回复
穗揣
傻寺俊擒
的想法，但是没有取得明显进展。 使用带有边框的透明对象，border-radius和matrix3d可以创建\“ bends \”，但这远不止于此。如果仅指定border-top，并设置了border-top-left-radius，则可以创建具有弯曲末端的直线。显然，这仍然是单个平面的一部分，沿其同级二维轴方向弯曲。 一旦我们开始考虑将二维元素折弯到当前不占据的3D维度，那么在没有Canvas，WebGL或其他渲染引擎的情况下，它实际上将变得不可能。