相关疑难解决方法(0)

在浏览IE10的开发人员博客后,我发现他们不支持preserve-3d设置.

他们确实提供了一种解决方法,但我似乎无法让它发挥作用.我的示例适用于Safari,Chrome和Firefox,但不适用于IE10.如果有人能帮我实现这一目标,我将非常感激.

单击时,框应围绕Y轴旋转,以显示一些文本和绿色背景颜色.在IE10中并非如此

我的例子: http ://codepen.io/2ne/pen/zEpge

部分代码:

HTML

<div class="flip-wrapper">
    <div class="front"></div>
    <div class="back">IE10 SUCKS</div>
</div>

CSS

.flip-wrapper {
    cursor: pointer;
    height: 100%;
    -moz-perspective: 1000;
    -webkit-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%;
}

.flip-wrapper .front,
.flip-wrapper .back {
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 100%;
    position: absolute;
    width: 100%;
}

.flip-wrapper .back {
  background: none repeat scroll 0 0 #298F68;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: …

我正在构建一个简单的纯css'卡片翻转'动画,它必须在IE10中工作,但遗憾的是我写的不是.

这里有jsFiddle演示或这里有html zip样本

我可以看到他们的演示在IE10中可以看到背面可见性,所以也许我只是忽略了一些愚蠢的东西,也许是一副新鲜的眼睛可能有帮助!

提前致谢!