gpt4 book ai didi

html - CSS3 3D flex 透视

转载 作者:太空狗 更新时间:2023-10-29 14:15:23 24 4
gpt4 key购买 nike

CSS3 3D 变换 + 动画很棒。我想知道是否有办法让某些东西 flex 。

此示例翻转了(纸张)div,但动画看起来很僵硬,因为实际上,当您翻转纸张时,它会 flex 一点。

所以我忽略了任何属性,或者可能使它看起来像 flex 的组合?

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

带有 flex 的示例页面 curl (图片):http://numerosign.com/software/css3machine/#documentation

最佳答案

没有。最好的方法是使用 canvas 然后滑动图像,如下所示:http://www.20thingsilearned.com/ .这是其工作原理的分割:http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html

该方法有很多限制,但它是我见过的最好的方法。

关于html - CSS3 3D flex 透视,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6336552/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com