IE 11未显示3D变换

Question

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

注意：我尝试使用内置的新代码段功能，但是单击“插入代码”从未执行任何操作。

http://codepen.io/aherrick/pen/egbmG

HTML：

<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>

CSS：

    .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);
        }

Answer 1

您可能已经知道了这一点，因为已经过去了4个月，但是没有IE版本支持transform-style：preserve-3d。 这会破坏IE中CSS中的任何3D类型对象。 看起来Project Spartan会一如既往地支持它，但这对现在使用IE的任何人都无济于事。