IE 11 not Showing 3D Transform

Question

I have the following code. In IE10/11 I can't get it to render as 3D box (take a look in Chrome)

NOTE: I tried to use the built in new Code snippet feature but clicking "Insert Code" never did anything.

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

This question can help you : http://stackoverflow.com/questions/22848328/css3-3d-transform-dont-work-on-ie11 — Arthur, Oct 06 '14 at 19:06

score 0 · Answer 1 · answered Mar 02 '15 at 17:43

You've probably figured this out by now since it's been 4 months, but no version of IE supports transform-style: preserve-3d. This breaks any sort of 3D type object in CSS in IE. Looks like Project Spartan will support it out of the gate, but that doesn't help anyone working in IE right now.

IE 11 not Showing 3D Transform

1 Answers1