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

Question

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

我正在尝试创建一个简单的翻盖盒。

1. 按下盒子并翻转到背面。

2. 再次按下盒子并翻转回正面。

我的问题是翻盖看起来很糟糕，一旦翻到背面，翻盖卡就不会再翻回正面。我刚刚开始学习 SASS，我正在制作这张翻转卡来获得一些使用 SASS mixin 的经验。一旦我开始工作，我就会清理它。

这是我当前的代码。

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应将 旋转至 0deg 并.front旋转至 -180 度。
• 要使.front元素进入视图，.front应将 旋转至 0 度并.back旋转至 180 度。请注意旋转角度的标志有何不同。这是因为当需要进入视野.front时必须顺时针方向旋转，而当需要进入视野时必须逆时针方向旋转。.back.back.front

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

$(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>