css - 如何使用CSS 3D让子元素垂直于父元素显示？

Question

期望的效果是有 2 个垂直的 dom 元素，就像一本“弹出式”书。但是，子元素似乎被压平/投影到父元素的平面上。

如果这 2 个元素是 sibling ，它似乎可以工作。但是，我正在寻找一种方法来实现父/子元素。

<div class="container">
    <div class="parent" style="height:300px; width:300px;">
      <div class="child" style="height:100px; width:10px;">

      </div>
    </div>
</div>

.container {
  perspective: 1000;
  -moz-perspective: 1000;
  -webkit-perspective: 1000;
}

.parent {
  transform:rotateX(60deg);
  -moz-transform:rotateX(60deg);
  -webkit-transform:rotateX(60deg);
  background:grey;
}

.child {
  transform:rotateX(-30deg);
  -moz-transform:rotateX(-30deg);
  -webkit-transform:rotateX(-30deg);
  background:red;
  margin: 100px;
}

Answer 1

我找到了解决方案。

.parent {
    overflow: visible !important;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

一切都解决了