Question

根据这个例子：http://jsbin.com/zuyena/4/edit，我有两个元素，一个接一个地放在一个容器中：

<div class="container">
  <div class="box box1">... text ...</div>
  <div class="box box2">... text ...</div>
</div>

在CSS过渡/动画的帮助下，我想让box2动画显得好像从box1的下方拍打下来一样。省略实际过渡，我非常接近：

.container {
  -webkit-perspective: 300px;
  -webkit-perspective-origin: 50% 0%;
}

.box2 {
  -webkit-transform-origin: 0 0;
  -webkit-transform: rotateX(-80deg);
  -webkit-backface-visibility: hidden;  /* Doesn't this hide the back face? */
}

但是，正如您在此示例中看到的那样，box2的背面可见box1，尽管-webkit-backface-visibility: hidden;。我该如何防止这种情况？

P.S。我只使用-webkit前缀来保持示例简单。

Answer 1

这是因为您使用perspective！
直到-90deg它没有任何隐藏的背面！尝试设置-91deg，看看你的背面会隐藏。

.box2 {
  -webkit-transform-origin: 0 0;
  -webkit-transform: rotateX(-91deg); /*now it will work*/
  -webkit-backface-visibility: hidden;
}

Answer 2

backface-visibility仅在元素的转换角度明显小于90deg s时启动。

但是，如果元素的透视图是通过perspective和perspective-origin属性从其父元素派生的，则即使在该元素上指定的变换角度，背面也可能仍在显示大于-90deg s。可能无法解决这个问题，因为这是父元素的本质或派生透视：子元素的指定转换程度不仅仅是网络转换的负责。

如果您希望元素的净变换角度完全符合您指定的变换，则必须使用transform: perspective($deg)直接在该元素上设置透视。

查看Is it possible to set perspective-origin on elements that are transformed with transform: perspective()?了解详情。

如何隐藏使用transform：rotateX（）旋转的块元素的背面？

2 个答案: