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 />  </div> </div> </div> <button class="btn btn-primary" id="flip_content">Flip</button>
＆＃13;
＆＃13;
＆＃13;

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

1 个答案: