CSS: поворот элементы проблема

Question

Я пытаюсь повернуть два элемента в очень простой настройке

<div id="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

родительского элемент имеет свойство CSS в перспективе и на детях, я преобразование

#parent { 
    -webkit-perspective: 800px; 
    -moz-perspective: 800px; 
    perspective: 800px; 
    width: 80px; 
    height: 24px; 
    background-color: grey; 
    padding: 1px; 
} 
.child { 
    -webkit-transform: rotateY(66deg); 
    -moz-transform: rotateY(66deg); 
    transform: rotateY(66deg); 
    width: 50px; 
    height: 50px; 
    margin:10px; 
    background-color: green; 
} 

(jsfiddle) Что я не понимаю, так это то, что второй ребенок правильно повернут, но первым не является. Его вершина горизонтальна и не вращается. Любые предложения, почему это происходит?

Answer 1

Это потому, что rotateY использует 3D-перспективу.

попробовать это в HTML и должно стать ясно:

<div id="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

Для меня на Firefox, он даже меняет цвет прямоугольников.