html - 第二张图片在 IE 中显示为镜像 --- CSS image FLIP transform- How to fix?

Question

我希望有人能帮助我获得代码，以便在 IE 中查看时正确翻转我的第二个图像(不是镜像)。我想我让它在其他浏览器中正常工作。 我的目标是显示图片 #1，然后在单击按钮时显示图片 #2。

该代码还使用了 javascript + jquery，但我目前的知识有限。 有人可以通过 css 提供一个解决方案，我可以添加或修改我的代码来完成我想做的事情吗？谢谢。

我的 fiddle :http://jsfiddle.net/zgn9kd0L/6/

HTML

<div id="block" class="block" onclick="changeClass()">
    <div class="front side">
        <img src="http://imgur.com/etY8veW.jpg" alt="" />
    </div>
    <div class="back side">
        <img src="http://imgur.com/DiSXWpR.jpg" alt="" />
    </div>
</div>
<button class="flip">Flip</button>

CSS

#container {
    height: 500px;
    width: 500px;
    position: relative;
    /*perspective*/
    -webkit-perspective: 500;
    -moz-perspective: 500;
    -ms-perspective: 500;
    -o-perspective: 500;
    perspective: 500;
}

.block {
    position: relative;
    height: 500px;
    width: 500px;
    /*transform-style*/
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /*transition*/
    -webkit-transition: -webkit-transform 1.5s;
    -moz-transition: -moz-transform 1.5s;
    -o-transition: -o-transform 1.5s;
    transition: transform 1.5s;
}

.rotated {
    /*transform*/
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.side {
    position: absolute;
    /*backface-visibility*/
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.front {
}

.back {
    /*transform*/
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip {
    background: white;
    font-family: 'open sans';
    font-weight: 400;
    color: #5b5b5b;
    border-radius: 5px;
    margin-top: 1em;
}

Answer 1

IE10+ only has partial support对于属性 transform-style: preserve-3d。我想这就是它不起作用的原因。

这是在 IE 中工作的类似替代方法。 (updated example)

HTML

<div class="block">
    <div class="front side">
        <img src="http://imgur.com/etY8veW.jpg" alt="" />
    </div>
    <div class="back side">
        <img src="http://imgur.com/DiSXWpR.jpg" alt="" />
    </div>
</div>

CSS - 省略供应商前缀。查看example .

.block {
    width: 500px;
    height: 500px;
    position: relative;
    perspective: 500;
}
.side {
    position: absolute;
    transition: transform 0.5s;
    backface-visibility: hidden;
}
.side.rotated {
    transform: rotateY(360deg);
}
.back {
    transform: rotateY(180deg);
}