卡片翻转动画InternetExplorer11

Card flip animation Internet Explorer 11

本文关键字：InternetExplorer11 动画 翻转      更新时间：2023-09-26

我正试图翻转一张卡片并展示它的背面。它适用于所有其他浏览器，但不适用于InternetExplorer11。

我试过添加-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/

Hi我更改了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上测试了它，它对我有效

不确定为什么第二个动画会延迟，因为我在自己的代码中使用了完全相同的方法。也许有人能把它清理干净。基本上是想添加一个轻微的延迟来更改z索引，使其出现，因为动画在其边缘（通过动画的50%），z索引会发生变化，并使其顶部有正确的卡片。

$(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>

相关文章：
  • 没有找到相关文章