Estoy usando CSS/JavaSript para rotar un cubo, el problema es que cuando ejecuto el script pasa por todos los lados a la vez. Mi solución fue usar setTimeout() para permitir que se ejecutara cada animación CSS. Esto funciona muy bien para los primeros seis, pero luego se detiene porque solo hay seis iteraciones en la función. ¿Cómo puedo hacer que esta función se repita una vez que esté hecha?
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>Podrías hacer que la función sea recursiva. De esa manera, sería un bucle infinito en sí mismo. Debe agregar un tiempo de espera antes de que tenga lugar la recursión, de lo contrario, acumularía muchas funciones setTimeout y no creo que al navegador le guste eso.
Por ejemplo podrías hacer:
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>Simplemente llame a spinMe() como función recursiva desde su último setTimeout