div在无限循环jquery中只翻转一次

Question

我在表中有一个div项，我在JS中旋转div，并重复调用函数，但翻转只在函数执行时第一次发生，当函数调用时，它只显示div，而不翻转div。

我需要的是，每次调用函数时，div都应该翻转div

我该怎么做？

Css:

.box-1{
    transform: rotateY(180deg);
    display:none;
}

JQuery:

function startSlidecat1(started) {
  for (var i = 0; i < footwear.length; i++) {
    var image = footwear[i][0];
    imgslidercat1(image, i * 2100, i == footwear.length - 1);
  }
};
function imgslidercat1(image, timeout, last) {
  window.setTimeout(function() {
    document.getElementById('flip-1').style.display = 'none';
    document.getElementById('category-1').style.display = 'block';
    document.getElementById('category-1').innerHTML = "";
    var product = document.getElementById('category-1');
    var elem = document.createElement("img");
    product.appendChild(elem);
    elem.src = image;
    if (last) {
      flip();
    }
  }, timeout);
}
startSlidecat1();
function flip(){
    $('#category-1').delay(100).css('display', 'none');
    $('.box-1').delay(100).css('display', 'block');
    $('.box-1').transition({
        perspective: '100px',
        rotateY: '360deg'
      },200)  
    setTimeout(startSlidecat1, 2000);
  }

Answer 1

div第一次翻转时，其rotateY值从180deg变为360deg，这是可见的。但从第二次开始，它的值保持在360deg，所以什么也没发生。你只需要在每次调用这样的函数时重置值，

$('.box-1').css({transform:'perspective(100px) rotateY(180deg)'});

你可以把它包含在startSlidecat1函数中，比如

function startSlidecat1(started) {
  $('.box-1').css({transform:'perspective(100px) rotateY(180deg)'});
  for (var i = 0; i < footwear.length; i++) {
    var image = footwear[i][0];
    imgslidercat1(image, i * 2100, i == footwear.length - 1);
  }
};