Preserve 3d not working on ie11 - css

Question

I'm trying to implement a flip on an image but its preserve 3d (or probably backface-visibility) is not working on ie11.
This solution didn't work for me: -webkit-transform-style: preserve-3d not working
Here is a pen for you to try stuff and also a fiddle: http://codepen.io/vandervals/pen/XbedKY?editors=110
.container {
-ms-perspective: 1500px;
perspective: 1500px;
}
.canvas {
position: relative;
width: 300px;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50% 0;
transition: transform 1s ease 0s;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
overflow: visible;
}
.canvas img {
max-width: 100%;
backface-visibility: hidden;
position: relative;
z-index: 2;
}
input:checked + .canvas {
transform: rotateY(180deg);
}
.red {
background: red;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
backface-visibility: hidden;
transform: rotateY(180deg);
}
<div class="container">
<input type="checkbox">
<div class="canvas">
<img src="http://todofondosdeamor.com/wp-content/uploads/images/48/gatitos-1__400x300.jpg">
<div class="red"></div>
</div>
</div>
<p>That checkbox over there</p>

Answer 1

Internet Explorer doesn't support preserve-3d in any version (probably Spartan will).
You need to change the way you have set the transforms if you want it to work (on the item directly instead of the container)
.container{
perspective: 1500px;
}
.canvas{
position: relative;
width: 300px;
transform-origin: 50% 50% 0;
transform-style: preserve-3d;
overflow: visible;
}
.canvas img{
max-width: 100%;
backface-visibility: hidden;
position: relative;
z-index: 2;
transition: transform 1s ease 0s;
}
input:checked + .canvas img {
transform: rotateY(180deg);
}
.red{
background: red;
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
z-index: 1;
backface-visibility: hidden;
transform: rotateY(180deg);
transition: transform 1s ease 0s;
}
input:checked + .canvas .red {
transform: rotateY(360deg);
}
<div class="container">
<input type="checkbox">
<div class="canvas">
<img src="http://todofondosdeamor.com/wp-content/uploads/images/48/gatitos-1__400x300.jpg">
<div class="red"></div>
</div>
</div>
<p>That checkbox over there</p>