Question

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

注意：我尝试使用内置的新代码段功能，但点击＆＃34;插入代码＆＃34;从未做过任何事。

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工作的任何人都没有帮助。

IE 11没有显示3D变换

1 个答案: