保留 3d 在 ie11 上不起作用答案

【问题标题】：Preserve 3d not working on ie11保留 3d 在 ie11 上不起作用
【发布时间】：2023-03-31 14:57:02
【问题描述】：

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

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

这是一支供你尝试的笔，也是一把小提琴：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>

【问题讨论】：

IE不支持caniuse.com/#feat=transforms3d

标签： css internet-explorer-11 css-transforms preserve-3d

【解决方案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>

【讨论】：