ie 10 css 3d transform ведет себя по-другому

Question

Я пытался реализовать функцию трансляции «translateZ» в предварительном просмотре IE10 и столкнулся с проблемой.

Таким образом, он работает только в том случае, если «прямой» родительский объект преобразованного узла имеет свойство «-ms-перспектива» и не работает, если родительский родитель получил свойство «-ms-перспектива».

Может кто-нибудь предложить, если это ошибка, и если есть обходной путь. Например, это не работает, если в следующем коде я применяю «-ms-перспективу» к «div1» и попробую rotateZ на div3.

<div class="div1"> 
    <div class="div2"> 
     Parent 
     <div class="div3"> 
      Child 
     </div> 
    </div> 
</div> 

Answer 1

Это, кажется, работает очень хорошо для меня в Internet Explorer 10.0.8400.0:

<div class="div1"> 
    <div class="div2"> 
     Parent 
     <div class="div3"> 
      Child Rotated 
     </div> 
    </div> 
</div> 

Наряду со следующими CSS:

.div1 { 
    margin: 25px 100px; 
    background: #f1f1f1; 
    -ms-perspective: 500px; 
} 

.div3 { 
    width: 100px; 
    height: 100px; 
    background: orange; 
    -ms-transform: rotateZ(30deg); 
} 

производит следующий эффект:

Fiddle: http://jsfiddle.net/jonathansampson/NKZw6/