CSS3中的反向三维旋转-透视原点、变换原点？

我试图在CSS3中的父容器上进行3D旋转…例如-webkit变换：旋转（30度），但在子对象上反转旋转，例如-webkit变换：旋转（-30度）。我希望孩子们从观众的角度来看是“平淡”的。当我对子对象应用旋转时，会发生一些变化，即它在一定程度上旋转，但不正确。我很确定我的问题要么与透视原点有关，要么与变换原点有关，但我不太清楚如何设置两者的值来解决它。我制作了一把小提琴来演示这个问题

只是确认一下，我希望子div仍然存在于相同的3D空间中，也就是说，右边的div应该看起来更小，因为它离得更远，但我希望两个子div都没有旋转

<div class="grandparent">
<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>
</div>

.grandparent{
    -webkit-perspective: 500;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective-origin: 50% 50%;
}

.parent {
    position: relative;
    background-color: yellow;
    width: 200px;
    height: 150px;
    -webkit-transform: rotateY(30deg) ;
}

.child1 {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: green;
    width: 50px;
    height: 50px;
    -webkit-transform: rotateY(-30deg) ;
}

.child2 {
    position: absolute;
    top: 20px;
    left: 120px;
    background-color: green;
    width: 50px;
    height: 50px;
    -webkit-transform: rotateY(-30deg) ;
}

.祖父母{
-webkit透视图：500；
-webkit变换样式：保留-3d；
-webkit透视图来源：50%50%；
}
.家长{
位置：相对位置；
背景颜色：黄色；
宽度：200px；
高度：150像素；
-webkit变换：旋转（30度）；
}
.儿童1{
位置：绝对位置；
顶部：20px；
左：20px；
背景颜色：绿色；
宽度：50px；
高度：50px；
-webkit变换：旋转（-30度）；
}
.儿童2{
位置：绝对位置；
顶部：20px；
左：120px；
背景颜色：绿色；
宽度：50px；
高度：50px；
-webkit变换：旋转（-30度）；
}

必须设置-webkit变换样式：在父项中保留-3d；如果是在外祖父母身上，不会影响孩子

（也许它应该“层叠”，但事实并非如此）

---

一旦你这么做了，你会发现孩子们是隐形的，因为他们在父母背后，但那是另一回事。将父级设置为半透明，您将看到它们。

非常感谢，就是这样。