jQuery div翻轉動畫點擊CSS和SASS不能正確翻轉

Question

我搜索了幾個類似的問題，但找不到解決方案，我的問題，所以它就是這樣。

我想創建一個簡單的翻轉框。

1. 按下方框並翻轉到背面。

2. 再次按下方框並翻轉回到正面。

我的問題是，翻蓋看起來不好，一旦它翻轉到背面，翻蓋卡片不會翻轉回到前面。我剛開始學習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

試圖創建與正面和背面元素翻頁效果旋轉時，您應該始終旋轉每個翻轉acti的兩個元素上。

翻蓋的方向（或旋轉角度）取決於背部還是前部被點擊。

• 爲了使.back元件進入視野中，.back應旋轉到0deg和.front應旋轉到-180deg。
• 要將.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>