jQuery div 点击时翻转动画 CSS 和 SASS 翻转不正确

Question

我搜索了几个类似的问题，但找不到解决我的问题的方法，所以就在这里。

我正在尝试创建一个简单的翻转框。

按下盒子然后翻到背面。
再次按下方框，翻回正面

我的问题是翻盖不好看，一旦翻到背面，翻盖卡就不会翻回正面了。我刚刚开始学习 SASS 并且我正在制作这张翻转卡片以获得一些使用 SASS mixins 的经验。一旦我开始工作，我会清理它。

这是我当前的代码。

HTML:

 <div class="flip3D">
      <div class="front">Front Box</div>
      <div class="back">Back Box</div>
 </div>

CSS (SASS):

@mixin flipCard($width, $height, $color) {
  width: 0;
  height: 0;
  margin: 10px;
  //display: block;
  //display: inline-block;
  float: left;

  .front {
    position: absolute;
    -webkit-transform: perspective(600px) rotateY(0deg);
    transform: perspective(600px) rotateY(0deg);
    background: $color;
    width: $width;
    height: $height;
    border-radius: 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: transform .5s linear 0s;
    transition: transform .5s linear 0s;    
    //z-index: 1002; 
  }

  .back {
    position: absolute;
    -webkit-transform: perspective(600px) rotateY(180deg);
    transform: perspective(600px) rotateY(180deg);
    background: $color - 40;
    width: $width;
    height: $height;
    border-radius: 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: transform .5s linear 0s;
    transition: transform .5s linear 0s;    
    //z-index:1002;
  } 
}

.flip3D {
  @include flipCard(240px, 200px, white - 20);
}

jQuery:

$(document).ready(function() {
  $(".flip3D").on('click', function() {
    if($(this).attr('data-click-state') == 1) {
        $(this).attr('data-click-state', 0)
        frontFlip();
    } else {
        $(this).attr('data-click-state', 1)
        backFlip();
    }
  });
});

function frontFlip() {
    $(".front")
    .css('transform', 'perspective(600px) rotateY(-180deg)')
    .css('-webkit-transform', 'perspective(600px) rotateY(-180deg)')
 }

function backFlip() {
    $(".back")
    .css('transform', 'perspective(600px) rotateY(0)')
    .css('-webkit-transform', 'perspective(600px) rotateY(0)')
}

Answer 1

在尝试创建前后元素都旋转的翻转效果时，您应该始终为每个翻转动作旋转这两个元素。

翻转的方向（或旋转角度）取决于点击的是背面还是正面。

要使 .back 元素可见，.back 应旋转到 0 度，.front 应旋转到 -180 度。
要使 .front 元素可见，.front 应旋转到 0 度，.back 应旋转到 180 度。请注意旋转角度的标志有何不同。这是因为当.back需要进入视野时.front必须顺时针旋转，而当.front需要进入视野时.back必须逆时针旋转映入眼帘。

注意：我删除了前缀属性以保持代码简单并添加了无前缀库。

$(document).ready(function() {

  $(".flip3D").on('click', function() {

    if ($(this).attr('data-click-state') == 1) {
      $(this).attr('data-click-state', 0)
      frontFlip();
    } else {
      $(this).attr('data-click-state', 1)
      backFlip();
    }
  });

});

function frontFlip() {
  $(".front")
    .css('transform', 'perspective(600px) rotateY(0deg)')
  $(".back")
    .css('transform', 'perspective(600px) rotateY(180deg)')
}

function backFlip() {
  $(".back")
    .css('transform', 'perspective(600px) rotateY(0)')
  $(".front")
    .css('transform', 'perspective(600px) rotateY(-180deg)')
}

.flip3D .front {
  position: absolute;
  transform: perspective(600px) rotateY(0deg);
  background: sandybrown;
  width: 240px;
  height: 200px;
  border-radius: 7px;
  backface-visibility: hidden;
  transition: transform .5s linear 0s;
}
.flip3D .back {
  position: absolute;
  transform: perspective(600px) rotateY(180deg);
  background: aqua;
  width: 240px;
  height: 200px;
  border-radius: 7px;
  backface-visibility: hidden;
  transition: transform .5s linear 0s;
}
.flip3D {
  width: 0;
  height: 0;
  margin: 10px;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip3D">
  <div class="front">Front Box</div>
  <div class="back">Back Box</div>
</div>

jQuery div 点击时翻转动画 CSS 和 SASS 翻转不正确

jQuery div flip animation on click with CSS and SASS not flipping correctly

css

jquery

css-transforms