Question

我坚持这个并且我遇到了一堵砖墙，所有这些都适用于Chrome，FF，Safari等，但在Internet Explorer中，我得到了正面图像的反面而不是背面文字，请帮助！！我确信有一个简单的答案我忽略了，但我已经到了最后期限，并且绝望地需要把它包起来。

提前感谢您的任何帮助：）

CSS

flip-container {
perspective: 1000px;
-webkit-perspective:1000px;


}
    /* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
font-family: "Montserrat Alternates regular";
text-align: center;
}

.flip-container, .front, .back {
width: 250px;
height: 250px;
font-family: "Montserrat Alternates regular";

}

/* flip speed goes here */
.flipper {
-webkit-transition: 0.6s;
-ms-transition: 0.6s;
transition: 0.6s;

-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

position: relative;
}

/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility:hidden;
-ms-backface-visibility:hidden;
backface-visibility: hidden;


margin: auto;
position: absolute;
top: 0;
left: 0;

}

/* front pane, placed above back */
.front {
z-index: 2;
border: 2px solid black;
border-radius: 30px;
-moz-border-radius: 30px;
-khtml-border-radius: 30px;
-webkit-border-radius: 30px;
-webkit-transform: rotateY(0deg);
 -ms-transform: rotateY(0deg);
transform: rotateY(0deg);
width: 246px;
height: 246px;
}

/* back, initially hidden pane */
.back {
z-index:3;
background-color: #fff;
border: 2px solid black;
        border-radius: 30px;
        -moz-border-radius: 30px;
        -khtml-border-radius: 30px;
        -webkit-border-radius: 30px;
        width: 246px;
        height: 246px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);

}


HTML:

<div class="grid-element">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">


      <div class="front" style="background: url('images/flip2.jpg');" />
    <span style="font-family: 'Montserrat Alternates regular';
 font-weight:bolder; text-align: center; position: relative; top: 190px; font-size:  
18pt;">Who Are We?</span> </div>
    <div class="back">

<div  style="text-align: center; font-family: 'Montserrat Alternates regular';     
font-size: 10pt; position: relative; top: 10px;margin-left:10px; margin-right:10px;   
margin-top:10px;">Founded by writers Kurt McClung and Simon Mackenzie to offer   
complete story solutions for ambitious entertainment in various media: from video  
games to comic books, theater and screen, novels to song writing.</div>
<img src="images/kurt.png" style="position:absolute; top:155px; left:18px; width:75px; 
height:75px"/>
<img src="images/simon.png" style="position:absolute; top:155px; left:152px;   
width:75px; height:75px"/>
    </div>
</div>
</div>
</div>

Target site : http://www.taliespin.com

Answer 1

尝试添加-ms-perspective:1000px;以及以下

flip-container {
 perspective: 1000px;
 -webkit-perspective:1000px;
}

（我现在正在使用Mac，无法在IE中进行测试，因此这是一个疯狂的猜测）

css卡翻转互联网资源管理器

1 个答案: