Estoy usando un código basado en esta demostración ( https://codepen.io/KittyGiraudel/pen/vEJXGm ) para organizar algunos elementos en un círculo. Quiero crear una animación para girar el círculo, sin embargo, mantenga los elementos en posición vertical mientras gira.
Así que pensé que podría usar jQuery simple para hacer una "transformación: rotar ()" de css y luego usar lo mismo con una rotación negativa en los elementos internos, sin embargo, debido a la forma en que está configurada la demostración, los elementos internos se mueven al centro de todo el círculo cuando se gira.
$('.button').click(function() { $('.box').animate( { deg: 72 }, { duration: 1200, step: function(now) { $(this).css({ transform: 'rotate(' + now + 'deg)' }); } } ); });Alternativamente, ¿hay alguna forma de usar jQuery para cambiar el valor de la variable "$rot"? Creo que js no puede acceder a las variables, pero tal vez haya una solución.
Dado que JS no está bloqueando, sugeriría simplemente rotar sus elementos internos en la dirección opuesta a su rotación principal. Se vería algo como esto:
$('.button').click(function() { $('.box').animate( { deg: 72 }, { duration: 1200, step: function(now) { $(this).css({ transform: 'rotate(' + now + 'deg)' }); } } ); $('.box .inner').animate( { deg: -72 }, { duration: 1200, step: function(now) { $(this).css({ transform: 'rotate(' + now + 'deg)' }); } } ); });Usando el codepen que enviaste, lo modifiqué un poco para que veas cuál sería el resultado real.
https://codepen.io/Dvermette018/pen/podGmXR
dave