Question

我有一个网站在Opera Chrome和Firefox中工作，但它在Internet Explorer中被保留-3d功能搞砸了。

有没有办法解决这个问题，仅针对Internet Explorer css代码并保留其他浏览器代码，就像现在一样？

我希望有可能。

的CSS：

.back img{
        max-width: 90%;
        height: auto;
        margin: 1em;
        overflow: hidden;
}

.front{
    margin-top: 0.2em;
    height: 100%;
    width: 100%;
    line-height: 1.2;
    margin-left: 0.2em;
    margin-right: 0.2em;
}


/*Container flip*/


/* flip the pane when clicked */
.flip .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
        transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
}

/* flip speed goes here */
.flipper {
        transition: 0.8s;
        transform-style: preserve-3d;
}

/* hide back of pane during swap */
.front, .back {
        backface-visibility: hidden;
        top: 0;
        left: 0;
}

/* front pane, placed above back */
.front {
        /* for firefox 31 */
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        position:absolute;
        margin-top: 1.2em;
        margin-bottom: 1.2em;
        margin-left: 20px;
        overflow: auto;
        word-break: normal;
        width: 90%;

        color: black;
}

/* back, initially hidden pane */
.back {
        transform: rotateY(180deg);
}

HTML：

<div class="flip-container flip">
 <div class="flipper">
  <div class="back">
   <img src="imgsource.png">
  </div>
  <div class="front">
   <p>Some text</p>
  </div>
 </div>
</div>

<div class="flip-container flip">
 <div class="flipper">
  <div class="back">
   <img src="imgsource.png">
  </div>
  <div class="front">
   <p>Some text</p>
  </div>
 </div>
</div>

<div class="flip-container flip">
 <div class="flipper">
  <div class="back">
   <img src="imgsource.png">
  </div>
  <div class="front">
   <p>Some text</p>
  </div>
 </div>
</div>

如果单击.flip-container类，则会删除.flip类，文本框将显示效果很好。这在Internet Explorer中不起作用。

感谢您的帮助！

Answer 1

Aleksander Bavdaz，提供了答案和解决方案：

不幸的是，IE已经使用了非前缀属性，因此您要么根本不能使用transform-3d，要么最后必须定义前缀属性。

CSS3 3D Transform doesn't work on IE11

变换风格保留-3d在Internet Explorer CSS无法正常工作

1 个答案: