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>