Internet Explorer CSS中的Transform-Style reserve-3d无法正常工作 [英] Transform-Style preserve-3d in internet explorer CSS not working

问题描述

我有一个可以在Opera Chrome和Firefox中运行的网站，但是它却与Internet Explorer中的reserve-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中不起作用.

感谢您的帮助！

解决方案

Aleksander Bavdaz在此处提供了答案和解决方法:

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

CSS3 3D转换在IE11上不起作用

I got a website Working in Opera Chrome and Firefox but it gets messed up with the preserve-3d feature in Internet Explorer.

Is there a way to fix this just for the internet explorer css code and leave the other browsers code as it is right now?

I hope thats possible.

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>

IF you click on the .flip-container class the .flip class gets removed and the textbox will show up with a nice effect. This doesnt work in Internet Explorer.

Thanks for helping!

解决方案

It Aleksander Bavdaz, provides the answer and the fix here:

Unfortunately IE already uses the non-prefixed properties, so you either can't use transform-3d at all or have to define the prefixed properties last.

CSS3 3D Transform doesn't work on IE11

这篇关于Internet Explorer CSS中的Transform-Style reserve-3d无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！