Question

我做了一些3D转换，并且在所有浏览器上它都可以正常工作但是它不起作用。如果您有时间，请先在普通浏览器中查看示例，然后在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

即时，3D变换不起作用

1 个答案: