3

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

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

只是为了确认一下，我希望子 div 仍然存在于同一个 3D 空间中，即右边的那个应该仍然显得更小，因为它更远，但我希望两个孩子都没有旋转。

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

1 回答 1

1

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

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

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

于 2013-10-29T08:53:53.763 回答