Question

我正试图让卡片翻转并显示其背面。它适用于所有其他浏览器，但不适用于Internet Explorer 11。

我已尝试添加-ms-序言，但这并没有帮助。问题似乎是IE不支持css属性transform-style: preserve-3d。

这是一个jsfiddle：https://jsfiddle.net/gbkq94hr/

HTML

<body>
    <article>
        <div id="card0" class="card">
            <figure class="front">
            </figure>
            <figure class="back">
            </figure>
        </div>
    </article>
</body>

JS

$(document).ready(function () {
    var flipped = false;
    var card = $("#card0");
    card.click(function() { flipFunction();});

    function flipFunction() {
        if (flipped) {
            flipped = false;
            card.removeClass('flip');
        } else {
            card.addClass('flip');
            flipped = true;
        }
    };
});

CSS

html {
    height: 100%;
}

.flip {
    transform: rotateY(180deg);
}

.card {
    float:left;
    width: 110px;
    height: 139px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 1s;
    position: relative;
}

figure {
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -ms-backface-visibility:hidden;
}

.back {
    background-color: blue;
    transform: rotateY(-180deg);
}

.front {
    z-index: 2;
    background-color: red;
    transform:rotateY(0deg);
}

article {
    height: 114px;
    width: 114px;
    perspective: 1000;
}

编辑：

正如评论中所建议的那样，我尝试按照David Walshes的说明进行操作，但仍然无法使其发挥作用。 https://jsfiddle.net/w9o2chmn/2/

Answer 1

您好我更改了jQuery代码以执行点击时的卡片翻转。请检查https://jsfiddle.net/w9o2chmn/6/

<强> HTML 我在课程标签

中添加了课程flip-container

<article class="flip-container">
    <div id="card0" class="card">
        <figure class="front">
        front
        </figure>
        <figure class="back">
        back
        </figure>
    </div>
</article>

<强> CSS 我删除了CSS :hover代码并将其放在jQuery中单击

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
  color:#fff;
}

/*  UPDATED! flip the pane when hovered */
    /*.flip-container:hover .back {
        transform: rotateY(0deg);
    }
    .flip-container:hover .front {
        transform: rotateY(180deg);
    }*/

.flip-container, .front, .back {
    width: 200px;
    height: 200px;
}

/* flip speed goes here */
.card {
    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;
}

/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    transform: rotateY(0deg);
  background:red;
}

/* back, initially hidden pane */
.back {
    transform: rotateY(-180deg);
  background:blue;
}

/*

<强>的jQuery

$(document).ready(function() {
    var flipped=false;

    $('.flip-container').on('click', function(){
        if(!flipped){
      $('.back').css('transform','rotateY(0deg)');
      $('.front').css('transform','rotateY(180deg)');
      flipped=true;
      console.log('true part :'+flipped);
      }
      else{
        $('.back').css('transform','rotateY(180deg)');
      $('.front').css('transform','rotateY(0deg)');
      flipped=false;
      console.log('else part :'+flipped);
      }
    });


});

请告诉我它是否适合你...

PS：我在IE11上对此进行了测试，并为我工作

Answer 2

只要我在自己的代码中完全相同地使用了此方法，就不确定第二个动画为什么会延迟。也许有人可以清理这个。基本上是想稍微增加一点延迟以更改z-index以便它出现，因为动画处于边缘（通过动画的50％），z-index会更改并允许其在顶部有正确的卡片。

$(document).ready(function() {

    $('.flip-container').on('click', function(){
        if(!$(".front").hasClass("front_flip")) {
        
            $(".front").delay(200).queue(function(){
                $(this).addClass("flip_z_index").dequeue();
            });
            
            $('.front').addClass('front_flip');
            $('.back').removeClass('back_flip');
            
        } else {
        
            $(".front").delay(200).queue(function(){
                $(this).removeClass("flip_z_index").dequeue();
            });
            
            $('.front').removeClass('front_flip');
            $('.back').addClass('back_flip');
        
        }
    });

});

.flip-container {
    perspective: 1000;
    color:#fff;
}

.flip-container, .front, .back {
    width: 200px;
    height: 200px;
}

.card {
    transform-style: preserve-3d;
}

.front, .back {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}

.front {
    z-index: 3;
    background:red;
}

.back {
    z-index:2;
    background:blue;
}

.front_flip {
    transform: rotateY(-180deg);
}
.back_flip {
    transform: rotateY(180deg);
}
.flip_z_index {
    z-index:1 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="flip-container">
    <div id="card0" class="card">
        <div class="front">
        front
        </div>
        <div class="back back_flip">
        back
        </div>
    </div>
</article>

卡片翻转动画Internet Explorer 11

2 个答案: