尝试一个简单的css3转换，而不是在IE中工作

Question

HTML:

<div class="mask">
    <div class="mask-wrapper">
        <div class="front">
            <img src="http://www.biography.com/imported/images/Biography/Images/Profiles/T/Sachin-Tendulkar-20710145-1-402.jpg" />
        </div>
        <div class="back">
            <ul>
                <li>Sachin Tendulkar</li>
                <li>Cricketer</li>
            </ul>
        </div>
    </div>
</div>

CSS:

有很多，但是，我这样做css3转换，

-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
transform: rotate(720deg);

这在IE10+中不起作用，在chrome和FX 中效果良好

JS Fiddle

Answer 1

IE不支持preserve-3d。（见此帖）

然而，这篇文章提供了一个变通方法，可以重新设计三维变换的样式，将透视应用于翻转过渡的每一侧。

css（仍然需要一些调整）

#container > div.upper {
    -moz-backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -moz-transform:perspective(800px) rotateY(0deg);
    -webkit-transform:perspective(800px) rotateY(0deg);
    transform:perspective(800px) rotateY(0deg);
}
#container:hover > div.lower {
    -moz-transform:perspective(800px) rotateY(0);
    -webkit-transform:perspective(800px) rotateY(0);
    transform:perspective(800px) rotateY(0);
}
#container:hover > div.upper {
    -webkit-transform:perspective(800px) rotateY(-179.9deg);
    -moz-transform:perspective(800px) rotateY(-179.9deg);
    transform:perspective(800px) rotateY(-179.9deg);
}

FIDDLE

Answer 2

使用Internet Explorer前缀（-ms-*）：-ms-backface-visibility: hidden;