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/

Answer 2

I would say that this is not posible. (whatever Microsoft says). The flatening of the child element can not be undone applying further transforms. See the following demo:

fiddle

with the HTML:

<div class="base" id="base1">Base1
    <div class="inner" id="inner1">1</div> 
    <div class="inner" id="inner2">2</div>
    <div class="inner" id="inner3">3</div>
    <div class="inner" id="inner4">4</div>
    <div class="inner" id="inner5">5</div>
    <div class="inner" id="inner6">6</div>
    <div class="inner" id="inner7">7</div>
    <div class="inner" id="inner8">8</div>
    <div class="inner" id="inner9">9</div>
</div>
<div class="base" id="base2">Base2
    <div class="inner" id="inner1">1</div>
    <div class="inner" id="inner2">2</div>
    <div class="inner" id="inner3">3</div>
    <div class="inner" id="inner4">4</div>
    <div class="inner" id="inner5">5</div>
    <div class="inner" id="inner6">6</div>
    <div class="inner" id="inner7">7</div>
    <div class="inner" id="inner8">8</div>
    <div class="inner" id="inner9">9</div>
</div>
<div class="base" id="base3">Base3
    <div class="inner" id="inner1">1</div>
    <div class="inner" id="inner2">2</div>
    <div class="inner" id="inner3">3</div>
    <div class="inner" id="inner4">4</div>
    <div class="inner" id="inner5">5</div>
    <div class="inner" id="inner6">6</div>
    <div class="inner" id="inner7">7</div>
    <div class="inner" id="inner8">8</div>
    <div class="inner" id="inner9">9</div>
</div>

and the CSS:

.base {
   width: 200px;
   height: 250px;
   display: block;
   -webkit-transform: rotatey(-45deg);
   transform: rotatey(-45deg);
   border: solid 2px black;
}

#base1 {
   -webkit-transform-style: preserve-3d;
}

#base2 {
   left: 300px;
   top: 0px;
   position: absolute;
}

#base3 {
   left: 600px;
   top: 0px;
   position: absolute;
   -webkit-transform: rotatey(-88deg);
   transform: rotatey(-88deg);
   -webkit-transform-style: preserve-3d;
}

.inner {
   border: solid 1px black;
   height: 20px;
   background-color: red;
}

#inner1 {
   -webkit-transform: rotatey(0deg);
   transform: rotatey(0deg);
}
#inner2 {
   -webkit-transform: rotatey(20deg);
   transform: rotatey(20deg);
}
#inner3 {
   -webkit-transform: rotatey(40deg);
   transform: rotatey(40deg);
}
#inner4 {
   -webkit-transform: rotatey(60deg);
   transform: rotatey(60deg);
}
#inner5 {
   -webkit-transform: rotatey(80deg);
   transform: rotatey(80deg);
}
#inner6 {
   -webkit-transform: rotatey(100deg);
   transform: rotatey(100deg);
}
#inner7 {
   -webkit-transform: rotatey(120deg);
   transform: rotatey(120deg);
}
#inner8 {
   -webkit-transform: rotatey(140deg);
   transform: rotatey(140deg);
}
#inner9 {
   -webkit-transform: rotatey(160deg);
   transform: rotatey(160deg);
}

That creates a base div rotated -45 deg. Several div are set on this one, with varying angles of rotation. In the first series, seen in a webkit browser, there is an angle for the child that gives him the horizontal position and so the original size (wider than the parent, that is rotated). In the second series, without the preserve 3d, the children can not exced the parent (apparent) size. The third series is a corner example: at an angle of almost 90 deg, the parent vanishes, but the children are still visible.

This doesn't work in IE, demonstrating that it is not posible to find an angle that restores the preserve-3d property.