Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Thomas MacFarlane
Thomas MacFarlane
2,430 Points

3D Flip Transform in IE10

I was working on the extra credit for Transitions and Transforms, and found I couldn't get the final 'flip' animation to work in IE10 on account of IE10 not yet supporting the "preserve-3d" keyword. The Microsoft site says this:

"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."

I don't understand how to implement this though. I'm working with the code specifically from the end of 3D Transforms - Part 2. The card with Mike the Frog that flips. I'm curious to know how this works in IE for now.

2 Answers

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

I've changed the code to what I posted previously, this type looks a little more awkward but will be easy to change when IE gets preserve-3d. Basically it works the normal way in every browser except IE which uses the different way:

body { -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; }

.wrap {
transition: -webkit-transform 2s ease-in;
transition: -moz-transform 2 ease-in;
transition: -o-transform 2s ease-in;
transition: transform 2s ease-in;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.wrap div {
-ms-transition:3s;
position: absolute;
-moz-backface-visibility:hidden;
-webkit-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}

.side-a {
z-index: 100;
}

.side-b {
-moz-transform:perspective(800px) rotateY(-180deg);
-webkit-transform:perspective(800px) rotateY(-180deg);
-o-transform:perspective(800px) rotateY(-180deg);
transform:perspective(800px) rotateY(-180deg);
}

.wrap:hover {
/*Flip */
-webkit-transform: rotateY(1turn);
-moz-transform: rotateY(1turn);
-o-transform: rotateY(1turn);
/*Can only allow once IE gets preserve-3d*/
/*transform: rotateY(1turn);*/
}

.wrap:hover .side-a {
-ms-transform:perspective(800px) rotateY(360deg);
}

.wrap:hover .side-b {
-ms-transform:perspective(800px) rotateY(180deg);
}
Thomas MacFarlane
Thomas MacFarlane
2,430 Points
Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Wow, I'm so proud of myself right now! Took me something like 1 hour, I reverse-engineered someone else's code online to make the flip work on all browsers, including IE! Here's what I've got

/*For when IE adopts preserve-3d*/
.wrap {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

/*set Transition and Backface Properties*/
.wrap div {
-webkit-transition:3s;
-moz-transition:3s;
transition:3s;
position: absolute;
-moz-backface-visibility:hidden;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}

/*Define Side-A*/
.side-a {
z-index: 100;
-moz-transform:perspective(800px) rotateY(0deg);
-webkit-transform:perspective(800px) rotateY(0deg);
transform:perspective(800px) rotateY(0deg);
}

/*Define Side-B*/
.side-b {
-moz-transform:perspective(800px) rotateY(-180deg);
-webkit-transform:perspective(800px) rotateY(-180deg);
transform:perspective(800px) rotateY(-180deg);
}

/*Turns Side-A*/
.wrap:hover .side-a {
-webkit-transform:perspective(800px) rotateY(-179.9deg);
-moz-transform:perspective(800px) rotateY(-179.9deg);
transform:perspective(800px) rotateY(360deg);
}

/*Simultaneously Turns Side-B in Opposite Direction*/
.wrap:hover .side-b {
-moz-transform:perspective(800px) rotateY(0);
-webkit-transform:perspective(800px) rotateY(0);
transform:perspective(800px) rotateY(180deg);
}
Thomas MacFarlane
Thomas MacFarlane
2,430 Points

XD Thanks! From the man himself too!