css - 保留 3d 不适用于 ie11

Question

我正在尝试在图像上实现翻转，但它的保留 3d(或者可能是背面可见性)在 ie11 上不起作用。

这个解决方案对我不起作用: -webkit-transform-style: preserve-3d not working

这里有一支笔供您尝试，还有一把 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 在任何版本中都不支持 preserve-3d(Spartan 可能会支持)。

如果你想让它工作(直接在元素而不是容器上)，你需要改变你设置转换的方式

.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>