CSS3 3D变换在IE11上无法使用。

Question

我正在尝试使用CSS3 3D变换构建一个立方体。

对于这个例子，我只有两个面：

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

在其他浏览器上都能得到好的结果，但在IE 11上很奇怪。

我在绿色面（1）上有一个好的3D旋转和平移，但是垂直的红色面（2）却没有以3D显示出来。它只是在绿色面上的红色面的投影。

你可以在这个fiddle中看到结果。

PS：我进行了100度的旋转而不是90度，以便看到红色面在绿色面上的投影（如果角度为90度，则投影不可见）。

谢谢大家！

- Arthur

Answer 1

IE目前还不支持transform-style: preserve-3d。

您需要将#header-cube的变换移除，并将其应用于每个figure子元素。不幸的是，IE已经使用了非前缀属性，因此您要么无法使用transform-3d，要么必须最后定义前缀属性。

从IE变换文档中：

目前，Internet Explorer 10不支持preserve-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);
}

- Aleksander Bavdaz

---

preserve-3d 目前正在开发中。 若要追踪状态，请访问 https://status.modern.ie/csstransformspreserve3d?term=preserve - David Storey

两年后，这仍然是真的。非常感谢您的答案，它节省了我很多时间。;)+1 - Louys Patrice Bessette

同样在2020年 - 它在Edge上得到支持，但不支持IE11（更新的链接）https://developer.microsoft.com/en-us/microsoft-edge/status/csstransformspreserve3d/?q=preserve - Toma Nistor