如何在jquery中設置翻轉方向？

下面的代碼是一個jquery腳本，使點擊時內容翻轉，此代碼中的所有內容均可正常工作，但翻轉方向從右向左，然後從左向右翻轉，如何設置方向以使其翻轉一個方向，右到左？如何在jquery中設置翻轉方向？

var topCard = 1; 
var facingUp = true; 
var totalFaces = $('#flip-content .contents').length; 

function flipCard(n) { 

// Replace the contents of the current back-face with the contents 
// of the element that should rotate into view. 
var curBackFace = $('.' + (facingUp ? 'face2' : 'face1')); 
var nextContent = $('#flip-content' + n).html(); 
var nextContent = $('#flip-content .contents:nth-child(' + n + ')').html(); 

curBackFace.html(nextContent); 

// Rotate the content 
$('.card').toggleClass('flipped'); 
facingUp = !facingUp; 

if (topCard === totalFaces) { 
    topCard = 0; 
} 
} 

$('#flip-content').on('click', function() { 
topCard++; 
flipCard(topCard); 
}); 


$(document).ready(function() { 
// Add the appropriate content to the initial "front side" 
var frontFace = $('.face1'); 
var frontContent = $('#flip-content .contents:first-child').html(); 
frontFace.html(frontContent); 
});

來源

2014-05-08 Lizza Faith

我可以忽略它，還是在您的代碼段中沒有定義翻轉動畫？ :)所有輸入的代碼似乎都是有效的，但根據我的理解，卡片不會被視覺翻轉。有一件事，你使用'var nextContent'兩次。問題中的錯誤或代碼中的錯誤？ :) – Flater

我猜你正在使用'css3'？ – Spokey

是的，我使用css3 –

我看不到你的CSS，因爲它沒有發佈在我評論的時候，但我相信你有東西倒退。你告訴它轉向這個方向，所以無論你在哪裏使用這個屬性，都要切換它。

.card { 
    rotateY(-180deg); 
}

到

.card { 
    rotateY(180deg); 
}

來源

2014-05-08 14:25:01

而不是使用：

$('.card').toggleClass('flipped');

這將翻轉你div來回，你需要在每個翻轉加180個輩分。例如：

var deg=0; 
... 

deg += 180; 
$('.card').css('transform','rotateY('+deg+'deg)');

來源

2014-05-08 14:44:13

如何在jquery中設置翻轉方向？

回答

相關問題