CSS翻转卡片在Internet Explorer中存在问题

Question

我正在尝试在Internet Explorer 11中使用CSS翻转卡片。我已经阅读了其他问题并得到的解决方案是将“-ms”前缀添加到翻转卡片功能中。我已经这样做了，但在IE 11中，翻转的卡片由于某种原因没有显示背面。

请点击以下链接查看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;
    });
});

- checkmate711

---

你看到背面了吗？（带有“更多关于主题的信息”白色方块） - checkmate711

Harry - 当然，我会的。感谢你的帮助。 - checkmate711

检查一下这个链接在你这里是否可行，伙计。它在IE11上可以工作，但是会产生非常卡顿的效果。这篇文章是我之前写的一个不同的答案，与这个问题有点关联。你可能会发现它有用。 - Harry

请查看此处的内容：http://davidwalsh.name/demo/css-flip.php - 它支持IE 10。 - jbutler483

感谢评论。让我尝试并更新问题。 - checkmate711

@jbutler483 在ie11 windows10中不起作用。 - Claudiu Creanga

Answer 1

我最终采用了 jbutler483 在 David Walsh 的博客上提出的解决方案，因为它具有流畅的翻转效果并在所有浏览器中都可以工作。 这是我的代码：

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);
}

- checkmate711