Question

下面的代码是一个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);
});

Answer 1

我无法看到您的CSS，因为我在发表评论时没有发布，但我相信您有一些倒退的东西。你告诉它转向那样，所以无论你在哪里使用这个属性，都要切换它。

.card {
  rotateY(-180deg);
}

到

.card {
  rotateY(180deg);
}

Answer 2

而不是使用：

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

将来回翻转div，每次翻转需要加180度。类似的东西：

var deg=0;
...

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

如何在jquery中设置翻转方向？

2 个答案: