我正在尝试在Internet Explorer 11中使用CSS翻转卡片。我已经阅读了其他问题并得到的解决方案是将“-ms”前缀添加到翻转卡片功能中。我已经这样做了,但在IE 11中,翻转的卡片由于某种原因没有显示背面。
请点击以下链接查看HTML代码:http://jsbin.com/hazejuzezu/1/edit?html,css,js,output。
非常感谢您的帮助。
请点击以下链接查看HTML代码:http://jsbin.com/hazejuzezu/1/edit?html,css,js,output。
非常感谢您的帮助。
<div class="flip y-theme-icon-wrapper">
<div class="card text-center">
<div class="face front">
<div class="y-theme-icon">
<img src="http://i.kinja-img.com/gawker-media/image/upload/s--4bKbxQOb--/1036281511469286726.jpg" height="90" alt="">
</div>
</div>
<div class="face back">
<br><p>More information about this subject.</p>
</div>
</div>
</div>
CSS 代码:
.y-theme-icon-wrapper{
width: 140px;
height: 140px;
}
.y-theme-icon {
display: block;
width: 140px;
height: 140px;
background: @color-1;
border-radius: 70px;
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
-o-border-radius: 70px;
text-align:center;
}
.flip .card .back{
background-color: #fff;
}
.flip {
-webkit-perspective: 800;
-ms-perspective: 800;
-moz-perspective: 800;
-o-perspective: 800;
position: relative;
margin: 12px auto;
height: 100px;
z-index: 1;
position: relative;
}
.flip .card.flipped {
transform:rotatey(-180deg);
-ms-transform:rotatey(-180deg); /* IE 9 */
-moz-transform:rotatey(-180deg); /* Firefox */
-webkit-transform:rotatey(-180deg); /* Safari and Chrome */
-o-transform:rotatey(-180deg); /* Opera */
}
.flip .card {
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transform-style: preserve-3d;
-moz-transition: 0.5s;
-ms-transform-style: preserve-3d;
-ms-transition: 0.5s;
-o-transform-style: preserve-3d;
-o-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
position: absolute;
z-index: 2;
text-align: center;
backface-visibility: hidden; /* W3C */
-webkit-backface-visibility: hidden; /* Safari & Chrome */
-moz-backface-visibility: hidden; /* Firefox */
-ms-backface-visibility: hidden; /* Internet Explorer */
-o-backface-visibility: hidden; /* Opera */
}
.flip .card .front {
position: absolute;
z-index: 1;
cursor: pointer;
}
.flip .card .back {
color: black;
cursor: pointer;
transform:rotatey(-180deg);
-ms-transform:rotatey(-180deg); /* IE 9 */
-moz-transform:rotatey(-180deg); /* Firefox */
-webkit-transform:rotatey(-180deg); /* Safari and Chrome */
-o-transform:rotatey(-180deg); /* Opera */
}
/* Postcard */
.postcard-flip {
-webkit-perspective: 800;
-ms-perspective: 800;
-moz-perspective: 800;
-o-perspective: 800;
position: relative;
height: 500px;
z-index: 1;
position: relative;
}
.postcard-flip .card.flipped {
transform:rotatey(-180deg);
-ms-transform:rotatey(-180deg); /* IE 9 */
-moz-transform:rotatey(-180deg); /* Firefox */
-webkit-transform:rotatey(-180deg); /* Safari and Chrome */
-o-transform:rotatey(-180deg); /* Opera */
}
.postcard-flip .card {
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transform-style: preserve-3d;
-moz-transition: 0.5s;
-ms-transform-style: preserve-3d;
-ms-transition: 0.5s;
-o-transform-style: preserve-3d;
-o-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.postcard-flip .card .face {
position: absolute;
z-index: 2;
text-align: center;
backface-visibility: hidden; /* W3C */
-webkit-backface-visibility: hidden; /* Safari & Chrome */
-moz-backface-visibility: hidden; /* Firefox */
-ms-backface-visibility: hidden; /* Internet Explorer */
-o-backface-visibility: hidden; /* Opera */
}
.postcard-flip .card .front {
position: absolute;
z-index: 1;
cursor: pointer;
}
.postcard-flip .card .back {
color: black;
cursor: pointer;
transform:rotatey(-180deg);
-ms-transform:rotatey(-180deg); /* IE 9 */
-moz-transform:rotatey(-180deg); /* Firefox */
-webkit-transform:rotatey(-180deg); /* Safari and Chrome */
-o-transform:rotatey(-180deg); /* Opera */
}
JS代码:
$(document).ready(function() {
/* Card flip */
$(".flip").hover(function(){
$(this).find(".card").toggleClass("flipped");
return false;
});
});