Html IE 11未显示3D变换

我有以下代码。在IE10/11中，我无法将其渲染为3D框（看看Chrome）

注意：我试图使用内置的新代码段功能，但单击“插入代码”却没有任何效果

HTML:

---

从4个月前开始，您可能已经明白了这一点，但没有任何版本的IE支持变换样式：preserve-3d。这打破了IE中CSS中的任何3D类型对象。看起来Spartan项目将立即支持它，但这对目前在IE中工作的任何人都没有帮助。

这个问题可以帮助您：

<div class="rack-container">

    <div class="rack show-leftop">

        <figure class="back">
            <svg width="444" height="294">
            </svg>
        </figure>

        <figure class="front">
            <svg width="444" height="294">
            </svg>
        </figure>



        <figure class="left">
            <svg width="96" height="294">

                <rect class="rack-left" width="96" height="294" shape-rendering="crispEdges" fill="#fff" fill-opacity="1" orientation="vertical"></rect>
            </svg>
        </figure>


        <figure class="top">
            <svg width="444" height="96">
                <rect class="rack-top" width="444" height="96" shape-rendering="crispEdges" fill="#fff" fill-opacity="1"></rect>
            </svg>
        </figure>
    </div>
</div>

    .rack-container {
        width: 444px;
        height: 294px;
        position: relative;
        margin: 0 auto 55px;
        border: 1px solid #CCC;
        -webkit-perspective: 2300px;
        -moz-perspective: 2300px;
        -o-perspective: 2300px;
        perspective: 2300px;
    }

    .rack {
        width: 100%;
        height: 100%;
        position: absolute;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: -webkit-transform 1s;
        -moz-transition: -moz-transform 1s;
        -o-transition: -o-transform 1s;
        transition: transform 1s;
    }

        .rack figure {
            display: block;
            position: absolute;
            border: 2px solid black;
            line-height: 196px;
            font-size: 90px;
            text-align: center;
            font-weight: bold;
            color: white;
        }

        .rack .front,
        .rack .back {
            width: 444px;
            height: 294px;
        }

        .rack .left {
            width: 96px;
            height: 294px;
            left: 247px;
        }

        .rack .top {
            width: 444px;
            height: 96px;
            top: 50px;
            line-height: 96px;
        }

        .rack .bottom {
            display: none;
        }


        .rack .front {
            -webkit-transform: translateZ( 50px );
            -moz-transform: translateZ( 50px );
            -o-transform: translateZ( 50px );
            transform: translateZ( 50px );
        }

        .rack .back {
            -webkit-transform: rotateY( 0deg ) translateZ( -50px );
            -moz-transform: rotateY( 0deg ) translateZ( -50px );
            -o-transform: rotateY( 0deg ) translateZ( -50px );
            transform: rotateY( 0deg ) translateZ( -50px );
        }

        .rack .right {
            -webkit-transform: rotateY( 90deg ) translateZ( 150px );
            -moz-transform: rotateY( 90deg ) translateZ( 150px );
            -o-transform: rotateY( 90deg ) translateZ( 150px );
            transform: rotateY( 90deg ) translateZ( 150px );
        }

        .rack .left {
            -webkit-transform: rotateY(90deg) translateZ( -296px );
            -moz-transform: rotateY(90deg) translateZ( -296px );
            -o-transform: rotateY(90deg) translateZ( -296px );
            transform: rotateY(90deg) translateZ( -296px );
        }

        .rack .top {
            -webkit-transform: rotateX( 90deg ) translateZ( 100px );
            -moz-transform: rotateX( 90deg ) translateZ( 100px );
            -o-transform: rotateX( 90deg ) translateZ( 100px );
            transform: rotateX( 90deg ) translateZ( 100px );
        }


        .rack.show-leftop {
            -webkit-transform: translateZ( -100px ) rotateX(-25deg)rotateY(50deg);
            -moz-transform: translateZ( -100px ) rotateX(-25deg)rotateY(50deg);
            -o-transform: translateZ( -100px ) rotateX(-25deg)rotateY(50deg);
            transform: translateZ( -100px ) rotateX(-25deg)rotateY(50deg);
        }