Css 3D变换在过渡结束时失去透视效果
所以我的代码是这样的，希望bg1 div从左边以一定角度旋转，但正如你所看到的，在最后，它“失去了透视”，正如我所看到的，尽管我可能错了。你认为我做错了什么，或者我能做些什么来实现我的目标 简单页面的代码：Css 3D变换在过渡结束时失去透视效果,css,transform,perspective,css-transforms,Css,Transform,Perspective,Css Transforms,所以我的代码是这样的，希望bg1 div从左边以一定角度旋转，但正如你所看到的，在最后，它“失去了透视”，正如我所看到的，尽管我可能错了。你认为我做错了什么，或者我能做些什么来实现我的目标 简单页面的代码： <style> #bg1{ position:absolute; left:0px; top:0px; width:100%; height:100%; backgro
<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{
位置：绝对位置；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
背景颜色：橙色；
字体大小：100px；
字体系列：Arial；
颜色：白色；
文本对齐：居中；
-webkit转换：透视图（100px）；
-webkit变换原点：左；
过渡：1s；
}
#bg1：活动{
-webkit变换：旋转（85度）；
}
提前感谢。您需要在活动状态下指定透视图，因为透视图位于变换内部：
#bg1:active{
-webkit-transform: perspective(100px) rotateY(85deg);
}