在Firefox上翻转div的内容，但在Chrome中不翻转

Question

我有这个HTML代码

<div id="f1_container">
                                <div id="f1_card" class="shadow">
                                    <div class="front face"
                                        style="border: 1px solid black; padding: 15px;">
                                        This is a sample question <br /> This is a sample question <br />
                                        This is a sample question <br /> This is a sample question <br />
                                        This is a sample question <br /> This is a sample question <br />
                                    </div>
                                    <div class="back face center">
                                        This is sample answer <br /> This is sample answer <br />
                                        This is sample answer <br /> This is sample answer <br />
                                        This is sample answer <br /> This is sample answer <br />
                                        <!-- <p>This is nice for exposing more information about an
                                            image.</p>
                                        <p>Any content can go here.</p> -->
                                    </div>
                                </div>
                            </div>

对于翻转我使用此css代码

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
    -webkit-position: relative;
  -webkit-margin: 10px auto;
  -webkit-width: 450px;
  -webkit-height: 281px;
  -webkit-z-index: 1;
}
#f1_container {
  perspective: 1000;
    -webkit-perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
    -webkit-width: 100%;
  -webkit-height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1.0s linear;
}
/* #flip  { */
/*   transform: rotateX(180deg); */
/*   box-shadow: -5px 5px 5px #aaa; */

/* } */
.flip  {
  transform: rotateX(180deg);
  box-shadow: -5px 5px 5px #aaa;
    -webkit-transform: rotateX(180deg);
  -webkit-box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
    -webkit-position: absolute;
  -webkit-width: 100%;
  -webkit-height: 100%;
  -webkit-backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateX(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
   -webkit-display: block;
  -webkit-transform: rotateX(180deg);
  -webkit-box-sizing: border-box;
  -webkit-padding: 10px;
  -webkit-color: white;
  -webkit-text-align: center;
  -webkit-background-color: #aaa;
}

点击事件发生翻转

$( "#flip_content" ).on( "click", function() {
    var btn = document.getElementById('flip_content');
    var content = document.getElementById('f1_card');
    btn.onclick = function() {
      content.classList.toggle('flip');
      $(".btn-skip").addClass('hide');
      $('.btn-hide').removeClass('hide');
      $("#gmp-heading").html("Answer");
    }
    });

这种翻转在Firefox和IE9中以奇怪的方式发生，但这在谷歌浏览器中并不起作用。我怎样才能做到这一点？

Answer 1

由于您使用的是jQuery，请将JavaScript代码更改为：

$("#flip_content").on("click", function() {
  $('#f1_card').toggleClass('flip');
  $(".btn-skip").addClass('hide');
  $('.btn-hide').removeClass('hide');
  $("#gmp-heading").html("Answer");
});

的 Updated Fiddle

＆＃13;

＆＃13;

$("#flip_content").on("click", function() {
  $('#f1_card').toggleClass('flip');
  $(".btn-skip").addClass('hide');
  $('.btn-hide').removeClass('hide');
  $("#gmp-heading").html("Answer");
});

＆＃13;

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
  -webkit-position: relative;
  -webkit-margin: 10px auto;
  -webkit-width: 450px;
  -webkit-height: 281px;
  -webkit-z-index: 1;
}
#f1_container {
  perspective: 1000;
  -webkit-perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
  -webkit-width: 100%;
  -webkit-height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1.0s linear;
}
/* #flip  { */

/*   transform: rotateX(180deg); */

/*   box-shadow: -5px 5px 5px #aaa; */

/* } */

.flip {
  transform: rotateX(180deg);
  box-shadow: -5px 5px 5px #aaa;
  -webkit-transform: rotateX(180deg);
  -webkit-box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-position: absolute;
  -webkit-width: 100%;
  -webkit-height: 100%;
  -webkit-backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateX(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
  -webkit-display: block;
  -webkit-transform: rotateX(180deg);
  -webkit-box-sizing: border-box;
  -webkit-padding: 10px;
  -webkit-color: white;
  -webkit-text-align: center;
  -webkit-background-color: #aaa;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="f1_container">
  <div id="f1_card" class="shadow">
    <div class="front face" style="border: 1px solid black; padding: 15px;">This is a sample question
      <br />This is a sample question
      <br />This is a sample question
      <br />This is a sample question
      <br />This is a sample question
      <br />This is a sample question
      <br />
    </div>
    <div class="back face center">This is sample answer
      <br />This is sample answer
      <br />This is sample answer
      <br />This is sample answer
      <br />This is sample answer
      <br />This is sample answer
      <br />
      <!-- <p>This is nice for exposing more information about an
                                            image.</p>
                                        <p>Any content can go here.</p> -->
    </div>
  </div>
</div>
<button class="btn btn-primary" id="flip_content">Flip</button>

＆＃13;

＆＃13;

＆＃13;