CSS3 3D Transform doesn't work on IE11

Question

I'm trying to build a cube with CSS3 3D Transform..

For this example I have only 2 faces :

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

With every other browser I get a good result, but it's weird with IE 11.

I have a good 3D translate and rotate on the green face (1), but the red face (2) perpendicular doesn't display in 3D. It's only the projection of the red face on the green face.

You can see the result on this fiddle.

PS : I make a rotation of 100deg and not 90 to see the projection of the red face on the green face (if the angle was 90, the projection isn't visible).

Thank you all!

Answer 1

IE doesn't support transform-style: preserve-3d yet.

You have to remove the transform from #header-cube and apply it to each of the figure children. Unfortunately IE already uses the non-prefixed properties, so you either can't use transform-3d at all or have to define the prefixed properties last.

From the IE transforms documentation:

At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.

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);
}

becomes:

#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);
}