收藏
回答

transform-style: preserve-3d;无效

操作系统 工具版本
macOS 1.7.4


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

回答关注问题邀请回答
收藏

3 个回答

  • 悦青
    悦青
    2022-07-23

    内元素的第一个加上背面隐藏backface-visibility: hidden可以

    2022-07-23
    有用
    回复
  • 金城的妖精见过米
    金城的妖精见过米
    2018-01-31

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

    2018-01-31
    有用
    回复
  • 陈杰
    陈杰
    2018-01-29

    楼主是否解决

    2018-01-29
    有用
    回复
登录 后发表内容