如何解决rotationy元素与上级z-index,safari上的元素重叠
在野生动物园(osx和ios)中,使用rotatey()转换的元素似乎在旋转时攀登了z索引,与其他在较高z索引上的元素重叠。
所附的代码段在chrome和Firefox中呈现如下:
...以及以下关于Safari(osx和ios)的信息:
我想要的是chrome和firefox在Safari中的行为,如何实现?
谢谢
actor_ids
.container {
width: 100%;
height: 100%;
position: relative;
perspective: 2000px;
}
.container>div {
position: absolute;
top: 0;
left: 0;
}
.upper {
z-index: 3;
width: 300px;
height: 200px;
background: blue;
}
.rotating {
z-index: 2;
width: 200px;
height: 300px;
background: red;
transform: rotatey(-40deg);
}
.lower {
z-index: 1;
width: 100px;
height: 400px;
background: green;
}
解决方法
尽管我仍然不知道发生这种情况的原因,但是将旋转元素包装在其自己的3d场景(带有透视图的元素)中足以将其与其他div隔离开来,并阻止其在旋转期间进行交互。当然,该元素也需要定义其z-index:
.container {
width: 100%;
height: 100%;
position: relative;
}
.container>div {
position: absolute;
top: 0;
left: 0;
}
.upper {
z-index: 3;
width: 300px;
height: 200px;
background: blue;
}
.wrapper {
perspective: 2000px;
z-index: 2;
}
.rotating {
width: 200px;
height: 300px;
background: red;
transform: rotatey(-40deg);
}
.lower {
z-index: 1;
width: 100px;
height: 400px;
background: green;
}
<div class="container">
<div class="upper">
</div>
<div class="wrapper">
<div class="rotating">
</div>
</div>
<div class="lower">
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。