I am experiencing an issue with a div item in a table as I attempt to rotate it using JavaScript. The rotation works correctly the first time the function is executed, but subsequent calls do not result in flipping the div.
My goal is for the div to flip each time the function is called. How can I achieve this?
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);
}