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

【问题标题】：Reverse 3d rotation in CSS3 - perspective-origin, transform-origin?CSS3中的反向3d旋转 - 透视原点，变换原点？
【发布时间】：2013-11-08 01:15:49
【问题描述】：

我正在尝试在父容器上的 CSS3 中进行 3D 旋转...例如-webkit-transform：rotateY(30deg)，但在子节点上反转旋转，例如-webkit 转换：旋转 Y（-30 度）。我希望孩子们从观众的角度来看是“扁平的”。当我对孩子应用旋转时，会发生一些变化，即它在某种程度上旋转，但不正确。我很确定我的问题与透视原点或变换原点有关，但我不太清楚如何设置两者的值来解决它。我创建了一个小提琴来演示这个问题。

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

确认一下，我希望子 div 仍然存在于同一个 3D 空间中，即右侧的 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) ;
}

【问题讨论】：

标签： css 3d rotation

【解决方案1】：

你必须在父级中设置 -webkit-transform-style:preserve-3d；如果它在祖父母中不会影响孩子。

（可能它应该“级联”，但事实并非如此）。

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

【讨论】：

非常感谢，原来如此。