收藏
回答

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的下面翻转,始终被遮挡而看不见。

最后一次编辑于  2018-01-24  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • 金城的妖精见过米
    金城的妖精见过米
    2018-01-31

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

    2018-01-31
    赞同
    回复
  • 陈杰
    陈杰
    2018-01-29

    楼主是否解决

    2018-01-29
    赞同
    回复