Internet Explorer Preserve 3D fix

Question

The following code works in all browsers except for IE.10.

MSDN website says the following (which I do not understand how to apply):

Note The W3C specification defines a keyword value of preserve-3d for this property, which indicates that flattening is not performed. 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.

https://msdn.microsoft.com/en-gb/library/ie/hh673529(v=vs.85).aspx

My code (I'm using CSS selectors for other reasons):

div[class^="flip"] {
  display: inline-block;
}
div[class^="flip"] {
  -webkit-perspective: 800;
  -moz-perspective: 800;
  -ms-perspective: 800;
  -o-perspective: 800;
  perspective: 800;
  width: 313px;
  height: 480px;
  position: relative;
  margin-right: 10px;
  margin-left: 10px;
}
div[class^="flip"] .card.flipped {
  -webkit-transform: rotatey(-180deg);
  -moz-transform: rotatey(-180deg);
  -o-transform: rotatey(-180deg);
  transform: rotatey(-180deg);
}
div[class^="flip"] .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
div[class^="flip"] .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 2;
  text-align: center;
}
div[class^="flip"] .card .front {
  position: absolute;
  z-index: 1;
  background: #F5F5F5;
  border: #DDD 1px solid;
}
div[class^="flip"] .card .back {
  -webkit-transform: rotatey(-180deg);
  -moz-transform: rotatey(-180deg);
  -o-transform: rotatey(-180deg);
  transform: rotatey(-180deg);
  background: #F5F5F5;
  border: #DDD 1px solid;
}

<div class="flip1">
  <div class="card">
    <div class="face front">Front content</div>
    <div class="face back">Back content</div>
  </div>
</div>

Could you please help me with this?

I had a very good response to a very similar question http://stackoverflow.com/questions/13474210/css3-3d-flip-animation-ie10-transform-origin-preserve-3d-workaround — 2ne, Apr 20 '15 at 09:40

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

Internet Explorer 10 and 11 only partially support 3D transforms. (Older versions of Internet Explorer do not support this property).

Internet Explorer 10 and 11 'have only partial support' because:

not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.

In answer to your question

Note The W3C specification defines a keyword value of preserve-3d for this property, which indicates that flattening is not performed. 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.

This is suggesting to apply the transform of the parent manually on the child element. So the 3d transform stated on your parent (.flip1) should also be placed on your child element(s) (.back and .front) as well.

score 3 · Answer 2 · edited Feb 28 '19 at 14:46

3

In all versions of IE, preserve-3d does not work. In Microsoft Edge, it does.

You can apply a 3D transformation to any element, but if it's parent is 3D transformed as well then the transformation will NOT work; the element will be flattened

so IE10 or IE11 = no fun in 3D.

edited Feb 28 '19 at 14:46

TylerH

20,799
66
75
101

answered Apr 20 '15 at 07:24

Mihnea Belcin

554
3
10

This answer was true at the time it was written. Now, IE12 (Edge) does support preserve-3D. In some ways, though, this makes IE even harder to cope with if you want to support older browsers, since it adds yet another way a specific IE browser will render 3D objects. – Bob Ray Jul 02 '18 at 20:49
2

@MihneaBelcin BobRay is mistaken; Microsoft Edge is *not* "IE12"; it is a completely different browser. There is no such thing (nor will there ever be) as an IE12. – TylerH Feb 28 '19 at 14:45
cc @BobRay as well – TylerH Feb 28 '19 at 14:47
@TylerH -- You are correct, I should have just written "Microsoft Edge," though I have seen Edge referred to as IE 12 many times. – Bob Ray Mar 01 '19 at 17:41
no fun in 3D LOL – Moritz Jun 28 '22 at 23:01

Internet Explorer Preserve 3D fix

2 Answers2

In answer to your question

Linked