Internet Explorer CSS中的Transform-Style preserve-3d不起作用答案

【问题标题】：Transform-Style preserve-3d in internet explorer CSS not workingInternet Explorer CSS中的Transform-Style preserve-3d不起作用
【发布时间】：2014-10-13 20:17:58
【问题描述】：

我有一个在 Opera Chrome 和 Firefox 中工作的网站，但它与 Internet Explorer 中的 preserve-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 中不起作用。

感谢您的帮助！

【问题讨论】：

标签： jquery html css

【解决方案1】：

Aleksander Bavdaz 在这里提供了答案和解决方法：

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

CSS3 3D Transform doesn't work on IE11

【讨论】：