transform-style: preserve-3d;无效
发布于 5 年前 作者 guiying88 6308 次浏览 来自 问答

如果两个元素相对于同一个父级元素绝对定位,top,left全部为0,即两个元素重叠,然后底层的元素无论如何翻转都会被顶层的元素遮挡而看不见。但是css3 文档说明transform-style属性使被转换的子元素保留其 3D 转换,设置 transform-style:preserve-3d,则在web上是正常的,一旦翻转就能看见,但在小程序的开发工具,以及大部分客户端上这个属性无效。我希望底层的元素在翻转时可以翻转到顶层的元素之上。

demo: //demo.wxml <view class=“contanier” style=“width:100vw;height:100vh;position:relative;”>     <view class=“chid-1”>chid-1</view>     <view class=“chid-2”>chid-2</view></view>

//demo.wxss

.contanier {

    width: 100vw;

    height: 100vh;

    position: relative;

    transform-style: preserve-3d;

    perspective: 400vh;

}

 

 .child-1{

    width: 100vw;

    height: 100vh;

    position: absolute;

    top:0px;

    left: 0px;

    transform: rotateX(40deg);

    transform-origin: left top;

    background:green;

 }

 .child-2{

    width: 100vw;

    height: 100vh;

    position: absolute;

    top:0px;

    left: 0px;

    background:red;

 }

这里child-1无论如何翻转都只是在child-2的下面翻转,始终被遮挡而看不见。

2 回复

没有解决,官方没有回复,我只能通过setTimeout延时配合animation来改变z-index,

楼主是否解决

回到顶部