web-dev-qa-db-ja.com

CSS3 3D変換はIE11では機能しません

CSS3 3Dトランスフォームでキューブを作成しようとしています。

この例では、2つの面しかありません。

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

他のすべてのブラウザでは良い結果が得られますが、IE 11。

緑の面（1）で良好な3Dの平行移動と回転を行っていますが、赤の面（2）の垂線が3Dで表示されません。緑の顔に赤い顔を投影しただけです。

Result on Chrome and IE

これで結果を見ることができます fiddle 。

PS：90度ではなく100度回転して、緑の面に赤い面の投影を表示します（角度が90の場合、投影は表示されません）。

皆さん、ありがとうございました！

cssinternet-explorer3dcss-transforms
11
Arthur

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);
}
16
Aleksander Bavdaz