CSS3 3D Transform не работает на IE11

Я пытаюсь построить куб с CSS3 3D Transform..

В этом примере у меня есть только 2 лица:

<section id="header-cube-container">
    <div id="header-cube">
        <figure></figure>
        <figure></figure>
    </div>
</section>

С каждым другим браузером я получаю хороший результат, но это странно с IE 11.

У меня хороший 3D-перевод и вращение на зеленой грани (1), но красная грань (2) перпендикулярна не отображается в 3D. Это только проекция красного лица на зеленое лицо.

Result on Chrome and IE

Вы можете увидеть результат на fiddle.

PS: Я делаю поворот 100deg, а не 90, чтобы видеть проекцию красной грани на зеленую грань (если угол равен 90, проекция не видна).

Спасибо всем!

Ответы

Ответ 1

IE еще не поддерживает transform-style: preserve-3d.

Вам нужно удалить преобразование из #header-cube и применить его к каждому из детей figure. К сожалению, IE уже использует свойства, отличные от префикса, так что вы вообще не можете использовать transform-3d или должны определить префиксные свойства last.

Из IE преобразует документацию:

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

JSFiddle: http://jsfiddle.net/TTDH7/17/

#header-cube {
    transform-style: preserve-3d;
    transform: rotateX(43deg) rotateZ(130deg);
}
figure:nth-child(1) {
    transform: translateZ(-16px);
}
figure:nth-child(2) {
    transform: rotateY(-100deg) translateZ(-16px);
}

становится:

#header-cube {
    transform-style: preserve-3d;
    -ms-transform-style: none;
    transform: rotateX(43deg) rotateZ(130deg);
    -ms-transform: none;
}
figure:nth-child(1) {
    transform: translateZ(-16px);
    -ms-transform: rotateX(43deg) rotateZ(130deg)
                   translateZ(-16px);
}
figure:nth-child(2) {
    transform: rotateY(-100deg) translateZ(-16px);
    -ms-transform: rotateX(43deg) rotateZ(130deg)
                   rotateY(-100deg) translateZ(-16px);
}