如何在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中设置翻转方向？

回答

相关问题