CSS3中的反向3D旋轉 - 透視原點，變換原點？

Question

我想在父容器上的CSS3中做3D旋轉...例如。 -webkit-transform：rotateY（30deg），但反轉兒童的旋轉-webkit-transform：rotateY（-30deg）。我希望孩子們從觀衆的角度來看是「平坦的」。當我將旋轉應用到孩子身上時，某些東西會發生變化，即它在某種程度上正在旋轉，但不正確。我很確定我的問題是要處理透視原點或變換原點，但我無法弄清楚如何設置其值來解決它。我創建了一個小提琴來演示這個問題。

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

只是爲了確認，我希望孩子的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;如果是在盛大的家長不影響孩子。

（可能它應該「級聯」，但它不會）。

一旦你這樣做了，你會發現孩子是隱形的，因爲他們在父母的背後，但那是另一回事。使父母半透明，你會看到他們。