CSS3 3D-Transformieren nicht auf IE11 funktioniert

Question

Ich versuche, einen Würfel mit CSS3 3D zu bauen Transformation ..

ich für dieses Beispiel habe nur zwei Gesichter:

<section id="header-cube-container"> 
    <div id="header-cube"> 
     <figure></figure> 
     <figure></figure> 
    </div> 
</section> 

mit jedem anderen Browser Ich bekomme ein gutes Ergebnis, aber es ist seltsam mit IE 11.

Ich habe eine gute 3D übersetzen und drehen auf dem grünen Gesicht (1), aber das rote Gesicht (2) senkrecht zeigt nicht in 3D. Es ist nur die Projektion des roten Gesichts auf dem grünen Gesicht.

Sie können auf dieser fiddle das Ergebnis sehen.

PS: Ich mache eine Drehung von 100 Grad und nicht 90, um die Projektion des roten Gesichtes auf dem grünen Gesicht zu sehen (wenn der Winkel 90 war, ist die Projektion nicht sichtbar).

Danke euch allen!

Answer 1

IE unterstützt transform-style: preserve-3d noch nicht.

Sie müssen die Transformation von #header-cube entfernen und sie auf jeden der figure Kinder anwenden. Leider verwendet IE bereits die Eigenschaften ohne Präfix, so dass Sie entweder transform-3d überhaupt nicht verwenden können oder die Präfixeigenschaften zuletzt definieren müssen.

Vom IE transforms documentation:

Zu diesem Zeitpunkt Internet Explorer 10 nicht das preserve-3d Schlüsselwort nicht unterstützt. Sie können dies umgehen, indem Sie die Transformation des übergeordneten Elements manuell auf jedes untergeordnete Element anwenden, zusätzlich zur normalen Transformation des untergeordneten Elements .

JSFiddle: http://jsfiddle.net/TTDH7/17/

#header-cube { 
    transform-style: preserve-3d; 
    transform: rotateX(43deg) rotateZ(130deg); 
} 
figure:nth-child(1) { 
    transform: translateZ(-16px); 
} 
figure:nth-child(2) { 
    transform: rotateY(-100deg) translateZ(-16px); 
} 

wird:

#header-cube { 
    transform-style: preserve-3d; 
    -ms-transform-style: none; 
    transform: rotateX(43deg) rotateZ(130deg); 
    -ms-transform: none; 
} 
figure:nth-child(1) { 
    transform: translateZ(-16px); 
    -ms-transform: rotateX(43deg) rotateZ(130deg) 
        translateZ(-16px); 
} 
figure:nth-child(2) { 
    transform: rotateY(-100deg) translateZ(-16px); 
    -ms-transform: rotateX(43deg) rotateZ(130deg) 
        rotateY(-100deg) translateZ(-16px); 
}