我正在尝试在Internet Explorer 11中使用CSS翻转卡。我已经阅读了其他问题,解决方案是在翻转卡功能中添加“-ms”前缀。我已经这样做但是在IE 11中,翻转的卡片由于某种原因没有显示背面。
http://jsbin.com/hazejuzezu/1/edit?html,css,js,output
非常感谢任何帮助。
HTML代码
<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;
});
});
答案 0 :(得分:1)
我最终使用了来自David Walsh博客的jbutler483提出的解决方案,因为它具有平滑的翻转效果并适用于所有浏览器。这是我的代码:
HTML:
<div class="flip-container y-flip-wrapper" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front text-center">
<!-- front content -->
<div class="y-theme-icon">
<img src="image.png" height="90" alt="">
</div>
</div>
<div class="back text-center">
<!-- back content -->
<p>More information about this subject.</p>
</div>
</div>
</div>
CSS:
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
display: inline-block;
}
/* UPDATED! flip the pane when hovered */
.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
}
.flip-container, .front {
width: 140px;
height: 140px;
}
.flip-container, .back {
width: 140px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
.back{
margin-top: 24px;
}
/* UPDATED! front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
}