Workaround for missing preserve-3d property in IE 10

Question

Microsoft says on their website

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.

Can someone give an example of how this should be applied?

Answer 1

To create 3D objects with transform-style: flat, you'll need to remove the transforms from the container div:

.object3d {
  transform-style: preserve-3d; // remove to get the flat behavior in all browers
  transform: translateX(80px) rotateY(-35deg); // cut the container transforms.
}

Then you'll might need to flatten your html structure, so no divs with transforms are inside divs with transforms.

And paste the transform operations (that used to be on the container div) on all the faces before their relative transformations.

before:

.object3d__bottom { 
  transform: translateY(50px) rotateX(90deg);
}

after:

.object3d__bottom { 
  transform: translateX(80px) rotateY(-35deg) translateY(50px) rotateX(90deg);
}

Demo: http://jsbin.com/ICuVihi/17/