CODEWITHSUNDEEP
internet-explorercsscss-transitionscss-transforms
Bungle
Bungle

Reputation: 19712

Why doesn't this rotate3d() CSS transform work as expected in Internet Explorer 10?

I'm trying to create a "card flip" effect using CSS transforms and transitions. I'm using a <div> to represent the card, and two child <div>s to represent the front and back faces of the card. Both faces are absolutely positioned on top of each other, and the latter has a 180-degree transform to turn it backwards.

I created a jsFiddle to illustrate my current approach:

http://jsfiddle.net/sCyLV/1/

The effect works as intended in Chrome & Firefox (latest versions). However, in IE10, the card appears to flip on both axes, and the back side of the card doesn't appear as the card is flipped - I just see the back side of the front card. Does anyone know why?

I would also love to hear any alternative ideas to accomplish this effect. The only functional requirement is that this effect has to be repeatable in the same direction - i.e., the card will flip in a continuous loop as if it's spinning about the y-axis. Once I get the flipping behavior under control, I will be dynamically swapping out the content on the backside upon each 180-degree rotation, leading to new content being shown on its face each time it turns around.

Upvotes: 2

Views: 3003

Answers (1)

Klors
Klors

Reputation: 2674

The animation works as I assume you intended when you use a rotateY(180deg) in transform.

That gets you the flip effect working normally, but the z-index is still out. To get around that I've just swapped the order of the divs and animated the sides individually rather than as one in the parent because IE10 seems to have an issue with preserve-3d.

Here's your fiddle for IE10 (note: I've broken the other browsers, but you just need to replicate the browser-specific properties)

Upvotes: 2

Related Questions