css卡翻转互联网探险 [英] css card flip internet explorer
本文介绍了css卡翻转互联网探险的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我遇到这个问题,我遇到了一个砖墙,所有的工作在Chrome,FF,Safari等,但在Internet Explorer中,我得到的正面图像的背面,而不是背面的文字,请帮助! !我确定有一个简单的答案,我忽略了,但我在截止日期,绝望需要得到这个包装。
I'm stuck on this and I've run into a brick wall, all works in Chrome, FF, Safari etc but in Internet Explorer, I get the reverse side of the front image rather than backside text, please help!!! I'm sure there's a simple answer I've overlooked but I'm on a deadline and desperatly need to get this wrapped up.
感谢提前任何帮助: )
Thanks in advance for any help :)
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
推荐答案
尝试添加 -ms-perspective:1000px
;以及以下
flip-container {
perspective: 1000px;
-webkit-perspective:1000px;
}
( test in IE so it a wild guess )
这篇关于css卡翻转互联网探险的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文