gpt4 book ai didi

css - 3D 变换在过渡结束时失去视角

转载 作者:行者123 更新时间:2023-11-28 12:25:41 25 4
gpt4 key购买 nike

所以我的代码是这样的,希望 bg1 div 从左侧旋转一定 Angular ,但正如您所见,最后,它“失去了视角”,正如我所见,虽然我可能错了。您认为我做错了什么或者我可以做些什么来实现我的目标?

简单页面代码:

    <style>
#bg1{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:orange;

font-size:100px;
font-family:Arial;
color:white;
text-align:center;

-webkit-transform: perspective(100px);
-webkit-transform-origin:left;
transition:1s;
}
#bg1:active{
-webkit-transform:rotateY(85deg);
}
</style>

<body>
<div id="bg1"></div>
</body>

提前致谢。

最佳答案

您需要在事件状态上指定透视图,因为它在变换中:

#bg1:active{
-webkit-transform: perspective(100px) rotateY(85deg);
}

否则,您将过渡到旋转但没有透视的元素。 (当然在过渡中还是有一些观点的)

关于css - 3D 变换在过渡结束时失去视角,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18552497/

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