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

理想的效果是有两个垂直的dom元素，比如一本“弹出”的书。但是，子元素似乎被展平/投影到父元素的平面上

如果这两个元素是兄弟元素，那么它似乎可以工作。然而，我正在寻找一种方法来为父/子元素实现这一点

<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;
}

.集装箱{
前景：1 000；
-莫兹透视图：1000；
-webkit透视图：1000；
}
.家长{
变换：旋转（60度）；
-moz变换：rotateX（60度）；
-webkit变换：rotateX（60度）；
背景：灰色；
}
.孩子{
变换：rotateX（-30度）；
-moz变换：rotateX（-30度）；
-webkit变换：rotateX（-30度）；
背景：红色；
利润率：100像素；
}

我对父元素和子元素进行了一些修改

.parent:before,
.parent:after {
 content: ".";    
 display: block;    
 height: 0;    
 overflow: hidden; 
}
.parent:after {clear: both;}

.child {
 transform:rotate(-7deg);
-moz-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
background:red;
margin: -60px 100px 100px 100px;
}

---

在这里你可以看到小提琴

我找到了解决办法

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

---

解决了所有问题

-webkit变换样式：preserve-3d；这似乎是答案。但我仍在努力让它发挥作用