相关疑难解决方法(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: …