Preserve 3d not working on ie11

问题

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>

回答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>

来源：https://stackoverflow.com/questions/30919489/preserve-3d-not-working-on-ie11

标签

css

css3

internet-explorer-11

css-transforms

preserve-3d