Сохранить 3d не работает на ie11

Я пытаюсь реализовать переворот изображения, но его сохранение 3D (или, возможно, обратная видимость) не работает на ie11.

Это решение мне не помогло: -webkit -transform-style: save-3d не работает

Вот вам ручка, чтобы попробовать, а также скрипка: 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>


css css-transforms internet-explorer-11 preserve-3d
person Vandervals    schedule 18.06.2015    source источник
comment
IE не поддерживает его caniuse.com/#feat=transforms3d   -  person vals    schedule 18.06.2015

Ответы (1)


arrow_upward
1
arrow_downward

Internet Explorer не поддерживает save-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>

person vals    schedule 18.06.2015