如果两个元素相对于同一个父级元素绝对定位,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>
.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的下面翻转,始终被遮挡而看不见。