Question

我研究了CSS3 3d变换，最后我得到了一些CSS3 3d翻转动作的代码。所以除了 Internet Explorer（IE11）之外，它在所有浏览器中都能正常运行。所以我在stackoverflow.com上调查了这个问题。我得到了一些解决方案，但遗憾的是那些对我没用。所以请好好看一下我的jsfiddle链接并为此提供一些解决方案。

CODE：

＆＃13;

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

＆＃13;

.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 );
}
#close{
    position:absolute;bottom:0px;right:0px;color:#fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
  <div id="card">
    <figure class="front">
        <input type="checkbox" id="one"/>one<br></br>
        <input type="checkbox" id="two"/>two<br></br>
        <input type="checkbox" id="three"/>three<br></br>
      </figure>
    <figure class="back">
        <div id="append"></div>
        <div id="close"><button>close</button></div>
    </figure>
  </div>
</section>

＆＃13;

有关详细信息，请参阅此链接：http://jsfiddle.net/Rayudu/jy0z8dy1/

请点击复选框，然后再进行翻转并点击关闭按钮以移除翻转。

Answer 1

我之前遇到过同样的问题，发现在翻转状态下使背面可见，解决了这个问题。因此，对于您的情况，添加以下行应解决IE11（以及IE10）中的问题。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
  <div id="card">
    <figure class="front">
      <input type="checkbox" id="one" />one
      <br></br>
      <input type="checkbox" id="two" />two
      <br></br>
      <input type="checkbox" id="three" />three
      <br></br>
    </figure>
    <figure class="back">
      <div id="append"></div>
      <div id="close">
        <button>close</button>
      </div>
    </figure>
  </div>
</section>

＆＃13;

注意：添加上述属性设置似乎会导致谷歌浏览器中的一些闪烁，并且可以通过单独覆盖GC的设置来克服（例如在this fiddle中由web-tiki提供。一般来说，在未加前缀（标准）属性之后添加前缀版本并不是一个好方法，但这并不是一个很大的问题，因为我们专门针对Chrome而言。

使用3D变换翻转在IE11中不起作用（我的不同）

1 个答案: