Question

我正在尝试在父容器上的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) ;
}

Answer 1

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

（可能它应该“级联”，但它不会）。

一旦你这样做，你会发现孩子们是看不见的，因为他们在父母身后，但这是另一个故事。让父母半透明，你会看到它们。

在CSS3中反转3d旋转 - perspective-origin，transform-origin？

1 个答案: