CSS 翻转卡 Internet Explorer 问题

Question

我正在尝试让 CSS 翻转卡在 Internet Explorer 11 中工作。我已阅读其他问题，解决方案是在翻转卡功能中添加“-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;
    });
});

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