Устранение неполадок в Internet Explorer

Следующий код работает во всех браузерах, кроме IE.10.

Веб-сайт MSDN говорит следующее (что я не понимаю, как подать заявку):

Примечание. Спецификация W3C определяет значение ключевого слова preserve-3d для этого свойства, что указывает на то, что сглаживание не выполняется. В настоящее время Internet Explorer 10 не поддерживает ключевое слово сохранения-3d. Вы можете обойти это, вручную применив преобразование родительского элемента к каждому из дочерних элементов в дополнение к нормальному преобразованию дочернего элемента.

https://msdn.microsoft.com/en-gb/library/ie/hh673529(v=vs.85).aspx

Мой код (я использую селектор CSS по другим причинам):

div[class^="flip"] {
  display: inline-block;
}
div[class^="flip"] {
  -webkit-perspective: 800;
  -moz-perspective: 800;
  -ms-perspective: 800;
  -o-perspective: 800;
  perspective: 800;
  width: 313px;
  height: 480px;
  position: relative;
  margin-right: 10px;
  margin-left: 10px;
}
div[class^="flip"] .card.flipped {
  -webkit-transform: rotatey(-180deg);
  -moz-transform: rotatey(-180deg);
  -o-transform: rotatey(-180deg);
  transform: rotatey(-180deg);
}
div[class^="flip"] .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
div[class^="flip"] .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 2;
  text-align: center;
}
div[class^="flip"] .card .front {
  position: absolute;
  z-index: 1;
  background: #F5F5F5;
  border: #DDD 1px solid;
}
div[class^="flip"] .card .back {
  -webkit-transform: rotatey(-180deg);
  -moz-transform: rotatey(-180deg);
  -o-transform: rotatey(-180deg);
  transform: rotatey(-180deg);
  background: #F5F5F5;
  border: #DDD 1px solid;
}

<div class="flip1">
  <div class="card">
    <div class="face front">Front content</div>
    <div class="face back">Back content</div>
  </div>
</div>

Ответ 1

Internet Explorer 10 и 11 частично поддерживают 3D-преобразования. (Старые версии Internet Explorer не поддерживают это свойство).

Internet Explorer 10 и 11 имеют только частичную поддержку, потому что:

не поддерживает свойство transform-style: preserve-3d. Эта предотвращает вложение трехмерных преобразованных элементов.

дальнейшее чтение

Это свойство предлагается реализовать в следующей версии Internet Explorer, поэтому, к сожалению, текущий IE действительно не поддерживает никаких "хороших" или "сложных" трехмерных функций.

Так как IE "игнорирует" это свойство, вы можете отображать сообщение баннера, чтобы информировать пользователей об использовании Chrome или Firefox для лучшего опыта (это также означает, что вам придется реализовать меньше браузеров для поддержки IE в целом).

В ответ на ваш вопрос

Примечание. Спецификация W3C определяет значение ключевого слова preserve-3d для это свойство, которое указывает, что сглаживание не выполняется. В на этот раз Internet Explorer 10 не поддерживает сохранение-3d ключевое слово. Вы можете обойти это, вручную применив родительский элемент преобразуется к каждому из дочерних элементов в дополнение к нормальное преобразование дочернего элемента.

Это предлагает применить преобразование родителя вручную к дочернему элементу. Таким образом, трехмерное преобразование, указанное в вашем родителе (.flip1), также должно быть помещено на ваш дочерний элемент (.back и .front).

Ответ 2

во всех версиях IE preserve-3d НЕ работает

вы можете применить 3D-преобразование к любому элементу. но если он родитель также преобразуется в 3D, то преобразование НЕ будет работать. элемент будет сплющен

поэтому IE10 или IE11 = не весело в 3D.

on http://caniuse.com/ говорят, что preserve-3d будет работать в следующей версии IE. но в настоящее время не