CSS Flip卡Internet Explorer问题 [英] CSS Flip card Internet Explorer issue
本文介绍了CSS Flip卡Internet Explorer问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想尝试在Internet Explorer 11中使用CSS翻转卡。我已经阅读了其他问题，解决方案是在翻转卡功能中添加-ms前缀。我已经这样做，但在IE 11，翻转的卡不显示背面的某些原因。
I'm trying to get a CSS flip card working in Internet Explorer 11. I have read other questions and the solution was to add '-ms' prefixes to the flip card functionality. I have done this but in IE 11, the flipped card does not show the backside for some reason.
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代码： / p>
JS Code:
$(document).ready(function() {
/* Card flip */
$(".flip").hover(function(){
$(this).find(".card").toggleClass("flipped");
return false;
});
});
推荐答案
我最后使用jbutler483提出的解决方案David Walsh博客，因为它有一个平滑的翻转效果，并在所有浏览器中工作。这里我的代码：
I ended up using the solution proposed by jbutler483 from a David Walsh blog since it had a smooth flip effect and worked in all browsers. Here my code:
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);
}
这篇关于CSS Flip卡Internet Explorer问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
