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度。注意旋转角度的标志是如何不同的。这是因为当.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>

jQuery div翻转动画点击CSS和SASS没有正确翻转

1 个答案: