CSS3 - 3D Flip Animation - IE10 transform-origin: save-3d workaround

Question

While browsing the IE10 developer blog , I found that they do not support save-3d setting.

They offer a workaround, but I can't get it to work. My example below works in Safari, Chrome and Firefox, but not in IE10. If anyone could help me, I would be very grateful.

Drawers should rotate around the Y axis when clicked to display text and a green background. This does not apply to IE10.

My example: http://codepen.io/2ne/pen/zEpge

Code Part:

HTML

<div class="flip-wrapper"> <div class="front"></div> <div class="back">IE10 SUCKS</div> </div> 

CSS

 .flip-wrapper { cursor: pointer; height: 100%; -moz-perspective: 1000; -webkit-perspective: 1000; -ms-perspective: 1000; perspective: 1000; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; width: 100%; } .flip-wrapper .front, .flip-wrapper .back { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; height: 100%; position: absolute; width: 100%; } .flip-wrapper .back { background: none repeat scroll 0 0 #298F68; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .flip-wrapper.flipped { cursor: default; -webkit-animation: flip 500ms 1; -moz-animation: flip 500ms 1; animation: flip 500ms 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; } 

2ne

Answer 1

I also could not find a good example of this anywhere, so I spent too much time creating my own.

This works in all browsers, does not have this strange 360deg IE flip, and includes the provision of static content (which lives on both sides of the map), which I needed to put a flip button in the upper right corner of both sides).

- I tested the latest versions of Chrome, Firefox, Safari, Opera and IE.

http://jsfiddle.net/Tinclon/2ega7yLt/7/

Edit: Also works with transparent backgrounds: http://jsfiddle.net/Tinclon/2ega7yLt/8/

Css (of course) includes IE hacks, so it's a bit long, but the html is pretty simple:

 <div class="card"> <div class="content"> <div class="cardFront">FRONT CONTENT</div> <div class="cardBack">BACK CONTENT</div> <div class="cardStatic">STATIC CONTENT</div> </div> </div> 

 $('.card').hover(function(){$('.card').toggleClass('applyflip');}.bind(this)); 

 .card { perspective: 1000px; -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000px; -ms-perspective: 1000px; margin:80px 150px; width:320px; height:243px; vertical-align:top; position:absolute; display:block; font-size:25px; font-weight:bold; } .card .content { transition: 0.5s ease-out; -webkit-transition: 0.5s ease-out; -moz-transition: 0.5s ease-out; -o-transition: 0.5s ease-out; -ms-transition: 0.5s ease-out; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; /* content backface is visible so that static content still appears */ backface-visibility: visible; -webkit-backface-visibility: visible; -moz-backface-visibility: visible; -o-backface-visibility: visible; -ms-backface-visibility: visible; border: 1px solid grey; border-radius: 15px; position:relative; width: 100%; height: 100%; } .card.applyflip .content { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); } .card .content .cardStatic { /* Half way through the card flip, rotate static content to 0 degrees */ transition: 0s linear 0.17s; -webkit-transition: 0s linear 0.17s; -moz-transition: 0s linear 0.17s; -o-transition: 0s linear 0.17s; -ms-transition: 0s linear 0.17s; transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); text-align: center; position: absolute; top: 0; left: 0; height: 0; width: 100%; line-height:100px; } .card.applyflip .content .cardStatic { /* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */ transition: 0s linear 0.17s; -webkit-transition: 0s linear 0.17s; -moz-transition: 0s linear 0.17s; -o-transition: 0s linear 0.17s; -ms-transition: 0s linear 0.17s; transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); } .card .content .cardFront { background-color: skyblue; color: tomato; } .card .content .cardBack { background-color: tomato; color: skyblue; } .card .content .cardFront, .card .content .cardBack { /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */ backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: visible; position: absolute; top: 0; left: 0; height: 100%; width: 100%; text-align: center; line-height:200px; border-radius: 14px; } .card .content .cardFront, .card.applyflip .content .cardFront { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); } .card .content .cardBack, .card.applyflip .content .cardBack { transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); } .card .content .cardFront, .card.applyflip .content .cardBack { /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */ animation: stayvisible 0.5s both; -webkit-animation: stayvisible 0.5s both; -moz-animation: stayvisible 0.5s both; -o-animation: stayvisible 0.5s both; -ms-animation: donothing 0.5s; -ms-transition: visibility 0s linear 0.17s; visibility: visible; } .card.applyflip .content .cardFront, .card .content .cardBack { /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */ animation: stayvisible 0.5s both; -webkit-animation: stayvisible 0.5s both; -moz-animation: stayvisible 0.5s both; -o-animation: stayvisible 0.5s both; -ms-animation: donothing 0.5s; -ms-transition: visibility 0s linear 0.17s; visibility: hidden; } @keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } } @-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } } @-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } } @-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } } @-ms-keyframes donothing { 0% { } 100% { } } 

Answer 2

Here is a much simpler flip algorithm that will also work in IE. https://jsfiddle.net/mff4jzd2/8/

JAVASCRIPT:

  var state = 0; $('.container').on('click',function(){ if(state == 0){ state = 1; $('.front').addClass('flip-front'); $('.back').addClass('flip-back'); } else{ state = 0; $('.front').removeClass('flip-front'); $('.back').removeClass('flip-back'); } }); 

CSS

  .container{ width:170px; height:280px; display:inline-block; position:relative; transform: perspective(400px); cursor:pointer; } .front{ position:absolute; top:0; left:0; width:100%; height:100%; background-color:blue; transform: perspective(400px) rotateY(0deg); backface-visibility: hidden; transition: 1.0s; opacity:1; box-shadow: 0 8px 6px -6px black; } .back{ position:absolute; top:0; left:0; width:100%; height:100%; background-color:green; transform: perspective(400px) rotateY(-180deg); backface-visibility: hidden; transition: 1.0s; opacity:0; box-shadow: 0 8px 6px -6px black; } .flip-front{ opacity:0; transform: perspective(400px) rotateY(180deg); } .flip-back{ opacity:1; transform: perspective(400px) rotateY(0deg); } 

HTML:

 <div class="container"> <div class="back"></div> <div class="front"></div> </div> 

Answer 3

Found the answer here . Wrote my own updated script here - this is css (I have included ms prefixes for brevity only):

 .container { width: 200px; height: 260px; position: relative; margin: 0 auto 40px; border: 1px solid #CCC; -ms-perspective: 1000; perspective: 1000; } .card { display: block; height: 100%; width: 100%; line-height: 260px; color: white; text-align: center; font-weight: bold; font-size: 140px; position: absolute; transition: all 0.5s linear; backface-visibility: hidden; } .card.flipped { -ms-transform: rotateY(360deg); transform: rotateY(360deg); } .front { background: red; } .back { background: #00f; transform: rotateY( 180deg ); } .container:hover .card { -ms-transform: rotateY(360deg); transform: rotateY(360deg); } 

Here is the button handler for switching (in addition to the hover event):

 $('button').click(function() { $('.card').toggleClass('flipped'); }); 

It is interesting (and somewhat disturbing) that the answer for IE10 is flipped 360 degrees (the "flipped" and hover event in css). Still wrapping my head around this.

In the hope that they will soon begin to save-3d.

Answer 4

here is a very simple version of nicholls

inverted rectangle

 #container { position: relative; height:362px; width: 282px; margin: 0 auto; } #container div { position:absolute; left:0; top:0; width:242px; height: 322px; padding:20px; background:#463; -ms-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-transition: 1.5s ease-in-out; -moz-transition: 1.5s ease-in-out; -ms-transition: 1.5s ease-in-out; -o-transition: 1.5s ease-in-out; transition: 1.5s ease-in-out; } #container:hover div.upper { -webkit-transform: perspective(800px) rotateY(179.9deg); -moz-transform: perspective(800px) rotateY(179.9deg); transform: perspective(800px) rotateY(179.9deg); } <div id="container" aria-haspopup="true"> <div class="upper"></div> </div> 

I left only a flip code.

Btw, the great effects of Nicholls!

Answer 5

Use a JS browser qualifier or any other method to apply CSS styles only to IE.

Then use the following code:

 .ie .flip-wrapper:hover .back { -ms-backface-visibility: visible; } .ie .flip-wrapper:hover .front { visibility: hidden; } 

Answer 6

As OP points out, there is an answer to a question on their blog, but unfortunately it is not a quote :

Note. The W3C specification defines the value of the preserve-3d keyword for this property, which indicates that anti-aliasing is not performed. Internet Explorer 10 does not currently support save-3d keyword. You can get around this with the help of manual, applying the transformation of the parent to each of the children in addition to the normal transformation of the child.

In general, as usual, the Microsoft browser is badly broken .

In further research, it seems that the interpolation mechanism is incomplete or broken in IE10; application of everything in terms of matrix transformations leads to the occurrence of "random" flips when turning on more than one axis. The only matrix interpolation method would be to manually manually process the entire interpolation. In addition, it seems that any interpolation involving a right angle will lead to an inconsistent “random” flip.

I managed to interpolate the required css, however (reduced), the code lasts thousands of lines. So yes, IE can do 3d css if you are not against pre-compilation and long wait.