css - CSS3 中的反向 3d 旋转 - 透视原点，变换原点？

Question

我正在尝试在父容器上使用 CSS3 进行 3D 旋转...例如-webkit-transform: rotateY(30deg)，但反转 child 的旋转，例如-webkit 变换:旋转 Y(-30 度)。我希望 children 从观看者的 Angular 来看是“扁平的”。当我对 child 应用旋转时，会发生一些变化，即它在某种程度上旋转，但不正确。我很确定我的问题要么与透视原点有关，要么与变换原点有关，但我不太清楚如何设置其中任何一个的值来解决它。我创建了一个 fiddle 来演示这个问题。

http://jsfiddle.net/bobsmells/ndn83/2/

只是为了确认一下，我希望子 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) ;
}

Answer 1

您必须在父级中设置 -webkit-transform-style: preserve-3d；如果它在祖 parent 中，则不会影响 child 。

(可能它应该“级联”，但实际上没有)。

一旦你这样做了，你会发现 children 是看不见的，因为他们在 parent 的后面，但那是另一回事了。使父级半透明，您将看到它们。