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。（见this post）

但是，this post提供了一种解决方法，您可以在其中重新设置三维变换，以将透视应用于翻转过渡的每一侧。

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;

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

2 个答案:

css（仍需要一些调整）