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?

Answer 1

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.

---

further Reading

This property is suggested to be implemented in the next version of internet explorer, so unfortunately the current IE doesn't really support any 'good' or 'complex' 3D functionality.

Since IE will 'ignore' this property, you may be able to display a message of banner to inform users to use Chrome or Firefox for better experience (it also means you will have to implement less browser hacks to support IE in general).

---

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.

Answer 2

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.