internet-explorer - 尝试一个简单的 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小提琴

Answer 1

IE 不支持preserve-3d。（见这篇文章）

但是，这篇文章提供了一种解决方法，您可以重新设置 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);
}

小提琴

Answer 2

使用 Internet Explorer 前缀 (-ms-*)：-ms-backface-visibility: hidden;