Using 3D transform flip is not working in IE11 (mine is different)

后端未结

关注

 1  1024

傲寒 2021-01-23 15:03

I investigate on CSS3 3d transform and finally I got some code for CSS3 3d flip action. So it\'s working fine in all browsers except Internet Explorer (IE11). S

1条回答

不思量自难忘° (楼主)

2021-01-23 15:17

I had run into the same problem earlier and found that making the back-face visible in the flipped state solves it. So for your case, adding the below lines should fix the issue in IE11 (and also IE10).

#card.flipped figure{
  backface-visibility: visible;
}

$('#one').click(function() {
  if ($(this).is(':checked')) {
    $("#card").addClass("flipped");
    $(".back #append").append("First one")
  }
});
$('#two').click(function() {
  if ($(this).is(':checked')) {
    $("#card").addClass("flipped");
    $(".back #append").append("second one")
  }
});
$('#three').click(function() {
  if ($(this).is(':checked')) {
    $("#card").addClass("flipped");
    $(".back #append").append("third one")
  }
});
$('#close').click(function() {
  $("#card").removeClass("flipped");
});

.container {
  width: 200px;
  height: 260px;
  position: relative;
  -ms-perspective: 800px;
  perspective: 800px;
}
#card {
  width: 100%;
  height: 100%;
  position: absolute;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 1s;
}
#card figure {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  margin: 0px;
  padding: 0px;
}
#card .front {
  background: red;
}
#card .back {
  background: blue;
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
#card.flipped {
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
#card.flipped figure {
  backface-visibility: visible;
}
#close {
  position: absolute;
  bottom: 0px;
  right: 0px;
  color: #fff;
}

Note: Addition of the above property setting seems to be causing some flickers in Google Chrome and that could be overcome by over-riding the setting for GC alone (like in this fiddle kindly contributed by web-tiki). Generally it is not a good approach to add prefixed versions after the un-prefixed (standard) property, but it is not much of an issue here as we are over-riding specifically for Chrome.

0 讨论(0)