保留3D在ie11上不起作用 [英] Preserve 3d not working on ie11

问题描述

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

I'm trying to implement a flip on an image but its preserve 3d (or probably backface-visibility) is not working on ie11.

该解决方案不适用于我: -webkit-transform-style:保留3d无效

这是您可以尝试使用的笔，也是一个小提琴: http://codepen.io/vandervals/pen/XbedKY?editors=110

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>

推荐答案

Internet Explorer不支持任何版本的preserve-3d(可能是Spartan会支持).

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>

这篇关于保留3D在ie11上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！