Css3 3D Transform Doesn't Work on Ie11

CSS3 3D Transform doesn't work on IE11

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

Preserve 3d not working on ie11

Internet Explorer doesn't support preserve-3d in any version (probably Spartan will).

You need to change the way you have set the transforms if you want it to work (on the item directly instead of the container)

.container{  perspective: 1500px;}.canvas{    position: relative;    width: 300px;    transform-origin: 50% 50% 0;    transform-style: preserve-3d;    overflow: visible;}.canvas img{  max-width: 100%;  backface-visibility: hidden;  position: relative;  z-index: 2;    transition: transform 1s ease 0s;}input:checked + .canvas img {  transform: rotateY(180deg);}.red{  background: red;  width: 100%;  height: 100%;  position: absolute;  top:0;  left:0;  z-index: 1;  backface-visibility: hidden;  transform:  rotateY(180deg);    transition: transform 1s ease 0s;}input:checked + .canvas .red {  transform: rotateY(360deg);}

<div class="container">  <input type="checkbox">  <div class="canvas">    <img src="http://todofondosdeamor.com/wp-content/uploads/images/48/gatitos-1__400x300.jpg">    <div class="red"></div>  </div></div><p>That checkbox over there</p>

Transform-Style preserve-3d in internet explorer CSS not working

It Aleksander Bavdaz, provides the answer and the fix here:

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.

CSS3 3D Transform doesn't work on IE11

Does IE11 support css 3d transforms fully (preserve-3d)

Microsoft are adding support for transform-style: preserve-3d. It is supported in IE for Windows 10 tech preview.

Source: http://status.modern.ie

Blog: http://blogs.msdn.com/b/ie/archive/2014/11/11/living-on-the-edge-our-next-step-in-interoperability.aspx

CSS transform:rotateX for Internet Explorer

The problem there could be that IE doesn't play nice with nested 3d elements. Take a look at this answer:

CSS3 3D Transform doesn't work on IE11

CSS 3D animation not working correctly in IE11

I'm not able to debug a matrix3d value, but I can emulate the effect by editing your animation:

 @keyframes mykeyframes {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(-180deg); }
 }

http://jsfiddle.net/e45q5/2/

CSS3 transform property working differently in Internet Explorer

Easier Approach

Instead of positioning from the top and left, position instead from the bottom and right. After you've done this, simply change your -50% translations to positive 50%. This will remove the overflow e.g.

.center-center {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

You can see these changes in action here: http://jsfiddle.net/bd17gsss/

It's worth noting that this bug is still filed, and our team will still give it the appropriate consideration when time and cycles permit us to do so.

Original Answer

There appears to be a layout bug with position: absolute in this particular demo. It's behaving similar to position: relative when it shouldn't be. I've opened a bug on this issue for the Internet Explorer team to investigate further.

For now, you could switch your position value from absolute to fixed, which appears to render the centered element correctly. This prevents you from having to use a fixed set of dimensions over and over, and instead allows you to use this approach as a general-purpose .modal style class that will center anything it is applied to.

The obvious caveat with this change is that your element is positioned according to the viewport, and no longer the document itself. This will freeze it on the screen effectively.

.modal {
    position: fixed;
    top: 50%; left: 50%;
    background-color: red;
    transform: translate(-50%, -50%);
}

To demonstrate the success this approach has with various dimensions, we can cycle through a few example sets and test the rendering of the element to ensure it is properly centered:

(function () {

    var xandy,
        index = 0,
        modal = document.querySelector( ".modal" ),
        sizes = [
            { x: "50%"  , y: "30%"   },
            { x: "400px", y: "288px" },
            { x: "25vw" , y: "75vh"  },
            { x: "90%"  , y: "90%"   }
        ];

    setInterval(function changeSize () {
        xandy = sizes[ index++ % sizes.length ];
        modal.style.width = xandy.x;
        modal.style.height = xandy.y;
    }, 1000 );

}());

The end-result can be viewed online here: http://jsfiddle.net/jonathansampson/c00u5ev8/

Css3 3D Transform Doesn't Work on Ie11