I'm using CSS/JavaSript to rotate a cube, problem is when I run the script it goes through all sides at once. My solution was to use setTimeout() to allow each CSS animation to run. This works great for the fist six, but after that it stops since there's only six iterations in the function. How can I get this function to repeat once it's done?
function spinMe() {
$('.cube').removeClass('show-top');
$('.cube').addClass('show-bottom');
setTimeout(function() {
$('.cube').removeClass('show-bottom');
$('.cube').addClass('show-left');
}, 1000);
setTimeout(function() {
$('.cube').removeClass('show-left');
$('.cube').addClass('show-back');
}, 4000);
setTimeout(function() {
$('.cube').removeClass('show-back');
$('.cube').addClass('show-right');
}, 7000);
setTimeout(function() {
$('.cube').removeClass('show-right');
$('.cube').addClass('show-top');
}, 10000);
}
jQuery(document).ready(function() {
spinMe();
});.cube.show-front {
transform: translateZ(-100px) rotateY( 0deg);
}
.cube.show-right {
transform: translateZ(-100px) rotateY( -90deg);
}
.cube.show-back {
transform: translateZ(-100px) rotateY(-180deg);
}
.cube.show-left {
transform: translateZ(-100px) rotateY( 90deg);
}
.cube.show-top {
transform: translateZ(-100px) rotateX( -90deg);
}
.cube.show-bottom {
transform: translateZ(-100px) rotateX( 90deg);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene">
<div class="cube">
<div class="cube__face cube__face--front">Front</div>
<div class="cube__face cube__face--back">Back</div>
<div class="cube__face cube__face--right">Right</div>
<div class="cube__face cube__face--left">Left</div>
<div class="cube__face cube__face--top">Top</div>
<div class="cube__face cube__face--bottom">Bottom</div>
</div>
</div>You could make the function recursive. In that way it would infinite loop itself. You must add a timeout before the recursion would take place, else you would stack a lot of setTimeout functions and I don't think the browser will like that.
For example you could do:
function spinMe() {
$('.cube').removeClass('show-top');
$('.cube').addClass('show-bottom');
setTimeout(function() {
$('.cube').removeClass('show-bottom');
$('.cube').addClass('show-left');
}, 1000);
setTimeout(function() {
$('.cube').removeClass('show-left');
$('.cube').addClass('show-back');
}, 4000);
setTimeout(function() {
$('.cube').removeClass('show-back');
$('.cube').addClass('show-right');
}, 7000);
setTimeout(function() {
$('.cube').removeClass('show-right');
$('.cube').addClass('show-top');
}, 10000);
setTimeout(function() {
spinMe();
}, 13000);
}
jQuery(document).ready(function() {
spinMe();
});.cube.show-front {
transform: translateZ(-100px) rotateY( 0deg);
}
.cube.show-right {
transform: translateZ(-100px) rotateY( -90deg);
}
.cube.show-back {
transform: translateZ(-100px) rotateY(-180deg);
}
.cube.show-left {
transform: translateZ(-100px) rotateY( 90deg);
}
.cube.show-top {
transform: translateZ(-100px) rotateX( -90deg);
}
.cube.show-bottom {
transform: translateZ(-100px) rotateX( 90deg);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scene">
<div class="cube">
<div class="cube__face cube__face--front">Front</div>
<div class="cube__face cube__face--back">Back</div>
<div class="cube__face cube__face--right">Right</div>
<div class="cube__face cube__face--left">Left</div>
<div class="cube__face cube__face--top">Top</div>
<div class="cube__face cube__face--bottom">Bottom</div>
</div>
</div>Just call spinMe() as recursive function from your last setTimeout