CSS Transform RotateX not working in IE11 - html

Question

I have a "promo roller" which is uses CSS animation to rotate a cube, showing only one of the four sides of the cube at any give time. The rotation of the cube shows the next side.
/*-- Animated Promo Roller --*/
#roller {
width: 140px;
height: 28px;
position: absolute;
}
.face1, .face2, .face3, .face4 {
font-size: 16px;
line-height: 28px;
font-weight: bold;
color: #fff;
text-align: center;
width: 140px;
height: 28px;
margin: -8px 0px 10px 157px;
position: absolute;
background: #d71e44; /* Old browsers */
background: -moz-linear-gradient(top, #d71e44 0%, #c11e44 100%); /* FF3.6+ */
background: -moz-gradient(linear, left top, left bottom, color-stop(0%,#d71e44), color-stop(100%,#c11e44)); /* Chrome,Safari4+ */
background: -moz-linear-gradient(top, #d71e44 0%,#c11e44 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d71e44 0%,#c11e44 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d71e44 0%,#c11e44 100%); /* IE10+ */
background: linear-gradient(to bottom, #d71e44 0%,#c11e44 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d71e44', endColorstr='#c11e44',GradientType=0 ); /* IE6-9 */
}
#roller .face1 {
transform: translateZ(14px);
}
#roller .face2 {
transform: rotateX(90deg) translateZ(14px);
}
#roller .face3 {
transform: rotateX(180deg) translateZ(14px);
}
#roller .face4 {
transform: rotateX(270deg) translateZ(14px);
}
#keyframes spincube {
from,to { }
0% { transform: rotateX(0deg); }
14% { transform: rotateX(0deg); }
21% { transform: rotateX(-90deg); }
35% { transform: rotateX(-90deg); }
42% { transform: rotateX(-180deg); }
70% { transform: rotateX(-180deg); }
77% { transform: rotateX(-270deg); }
91% { transform: rotateX(-270deg); }
100% { transform: rotateX(-360deg); }
}
#roller {
animation-name: spincube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 12s;
transform-style: preserve-3d;
transform-origin: 7px 7px 0;
}
<div id="roller">
<div class="face1">WAS R242,900</div>
<div class="face2">NOW R227,900</div>
<div class="face3">SAVE R15,000</div>
<div class="face4">ON PROMO</div>
</div>
The code works perfectly except in Internet Explorer (currently test with IE11), in IE11 the rotational animation works fine. But the transform rotateX and translateZ used to create the cube does not work. So only side of the cube is visible, the other 3 sides are hidden behind it.
Can this be made to work in IE11?
Kind regards
Willem

Answer 1

Better late than never:
IE doesn't support transform-style, see also for example this question (I'm sure there are more than this, but this was the one I found)
You could try to create some css for an effect like this with only 2 sides. With mediaqueries it should be possible to target IE11 only, so you could hide this 3d animation for IE and only show this two sided animation for IE users. Not ideal but better than nothing.
I created a fiddle by copy pasting the code from David Walsh's site, he did a really great work by creating this.
/* simple */
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
border: 1px solid #ccc;
}
/*
.flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
filter: FlipH;
-ms-filter: "FlipH";
}
*/
/* START: Accommodating for IE */
.flip-container:hover .back, .flip-container.hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container.hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* END: Accommodating for IE */
.flip-container, .front, .back {
width: 320px;
height: 427px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.6s;
-moz-transition: 0.6s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg);
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-moz-transform: rotateY(0deg);
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
-o-transform: rotateY(0deg);
-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;
-ms-transform: rotateY(0deg);
transition: 0.6s;
transform-style: preserve-3d;
transform: rotateY(0deg);
position: absolute;
top: 0;
left: 0;
}
.front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
background: lightgreen;
z-index: 2;
}
.back {
background: lightblue;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.front .name {
font-size: 2em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 60px;
left: 25%;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;
display: none;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.back-logo {
position: absolute;
top: 40px;
left: 90px;
width: 160px;
height: 117px;
background: url(logo.png) 0 0 no-repeat;
}
.back-title {
font-weight: bold;
color: #00304a;
position: absolute;
top: 180px;
left: 0;
right: 0;
text-align: center;
text-shadow: 0.1em 0.1em 0.05em #acd7e5;
font-family: Courier;
font-size: 22px;
}
.back p {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
text-align: center;
padding: 0 20px;
font-size: 18px;
}
/* vertical */
.vertical.flip-container {
position: relative;
}
.vertical .back {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
-webkit-transform-origin: 100% 213.5px;
-moz-transform-origin: 100% 213.5px;
-ms-transform-origin: 100% 213.5px;
transform-origin: 100% 213.5px;
}
/*
.vertical.flip-container:hover .flipper {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
*/
/* START: Accommodating for IE */
.vertical.flip-container:hover .back, .vertical.flip-container.hover .back {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.vertical.flip-container:hover .front, .vertical.flip-container.hover .front {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
/* END: Accommodating for IE */
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style='background: #adadad no-repeat 0px 0px;'>
<span class="name">David Walsh</span>
</div>
<div class="back" style="background: rgb(248, 248, 248);">
<div class="back-logo"></div>
<div class="back-title">#davidwalshblog</div>
<p>Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p>
</div>
</div>
</div>