Carousel Demo doesn't work in IE11

[flack]

I just tried the carousel demo here

http://desandro.github.io/3dtransforms/examples/carousel-01.html

in IE 11. Unfortunately, it doesn't seem to work, all the numbers on the panels are backward:

And if you click the next/previous buttons, it doesn't rotate the carousel, but rather flips the entire thing as if it were flat:

If you don't have IE 11, I'd be glad to help testing/debugging, but I would need some pointers where to start, as I haven't been doing much with 3d in CSS yet

[leads]

IE11 doesn't support preserve-3d. It supports other 3d things though so this is a pretty crushing blow!

Potential fix here
http://stackoverflow.com/questions/22848328/css3-3d-transform-dont-work-on-ie11

Though doesn't work in my example. Also not sure what this will do in future versions of IE once the issue is fixed.

In the meantime I am lucky enough that I can have a non-3d fallback for this site/app, so I'm using the Modernizr v3 (beta) to detect preserve3d support.

[flack]

Yes, I figured that out in the meantime. We've built a workaround by applying the transform to the child elements as suggested by Microsoft's knowledge base article. I'm not sure if this applies to the demo, but in case someone wants to try, here's what we came up with:

Carousel3D.prototype.transform = function() {    
    var parentTransform = 'translateZ(-' + this.radius + 'px) ' + this.rotateFn + '(' + this.rotation + 'deg)';

    if (!isIE){
        this.element.style[ transformProp ] = parentTransform;
    }else{
        // apply parent transform + child transform to all child elements
        var panel, angle, childTransform;
        for ( i = 0; i < this.panelCount; i++ ) {
            panel = this.element.children[i];
            angle = ( this.theta * i );
            childTransform = this.rotateFn + '(' + angle + 'deg) translateZ(' + this.radius + 'px)';
            panel.style[ transformProp ] = parentTransform + ' ' + childTransform;
        }
    }
};

[leads]

Probably wrong but I don't think that applies to the card flip http://desandro.github.io/3dtransforms/examples/card-01.html as it's the parent you are flipping. Only one of the child elements has any transform, and it's the same as the parent anyway!

[bivd]

is there any way to get the carrousel to auto-rotate by default ?

[coolwebs]

Good news is that MS Edge now supports preserve-3D. Just got to ween ppl off IE11. I plan to use a static fallback with modernizr - unfortunately no fun for IE11 users...

[iDVB]

@flack Do you have a full working code version of your IE fix above?
Here's what I understood and it still does not seem to work. It seems the horizontal movements are working but none of the perspective.
http://codepen.io/iDVB/pen/WxaVar?editors=0010

UPDATE -
NM, I just needed to move the perspective style down one to the carousel since the rotations are now being applied to the children. At least thats what worked and seems to make sense to me.
http://codepen.io/iDVB/pen/WxaVar?editors=0010

Any idea why it seems IE is not handling the depth right in terms of layers? Eg. some of the carousel's background panels seem to be on top of the foreground ones.

[jawnirock]

Hi @iDVB ! I checked this solution to the IE problem a couple of months ago and it looked perfect! Came back today to try to learn it, but it doesn't seem to be working. Looks flat on all browsers. What could be wrong? Great work nonetheless!