3D 变换不适用于 ie

Question

我做了一些 3d 转换，在所有浏览器上都可以正常工作，但在 ie 上就不行了。如果你有时间，请先在普通浏览器中查看示例，然后在 ie 上查看转换。

在示例中，您需要单击图像。

CSS。用 sass 写

.item {
    width: 388px;
    height: 273px;
    position: relative;
    float: left;
    margin: 0 0 2px 2px;
    cursor: pointer;
    outline: 1px solid transparent;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    img {
        display: block;
        width: 388px;
        height: 273px;
    }    
}

.top {
    width: 1170px;
    margin: 0 auto;

    .item {
        .button {
            content: attr(data-title);
            top: 100%;
            width: 100%;
            height: 50px;
            position: absolute;
            left: 0;
            background: rgba(0, 0, 0,0.7);
            font-size: 22px;
            color: #fff;
            font-weight: 400;
            line-height: 50px;
            padding: 0 0 0 15px;
            text-transform: uppercase;
            -webkit-transform-origin: 0% 0%;
            -webkit-transform: rotateX(-90deg);
            -moz-transform-origin: 0% 0%;
            -moz-transform: rotateX(-90deg);
            -ms-transform-origin: 0% 0%;
            -ms-transform: rotateX(-90deg);
            transform-origin: 0% 0%;
            transform: rotateX(-90deg);

            p {
                display: inline-block;
                font-size: 18px;
            }
        }

        &.active {
            .button {
                background: rgba(235, 141, 3, 0.7);
            }
        }

    }

    &.transform-top {
        .item {
            overflow: visible;
            -webkit-transform-origin: 50% 0%;
            -webkit-transform: rotateX(89.99deg) translateY(-100%);
            -moz-transform-origin: 50% 0%;
            -moz-transform: rotateX(90deg) translateY(-100%);
            -ms-transform-origin: 50% 0%;
            -ms-transform: rotateX(90deg) translateY(-100%);
            transform-origin: 50% 0%;
            transform: rotateX(89.99deg) translateY(-100%);
        }
    }
}

html

<div class="top">
   <div class="item">
       <img alt="" src="http://conceptmds.com/demo/wp-content/uploads/2015/02/Winter-Glory-30-x-30-cm-1-370x260.jpg">
       <span class="button">Winter Glory <p>30 X 30cm</p></span>
    </div>
</div>

现场版

live

Answer 1

IE 还不支持transform-style: preserve-3d。

你可以查看这个http://caniuse.com/#feat=transforms3d