title: I have items arranged in a circle. How can I rotate the whole thing while keeping the inside elements upright?
body: <p>Im using code based off of this demo (<a href="https://codepen.io/KittyGiraudel/pen/vEJXGm" rel="nofollow noreferrer">https://codepen.io/KittyGiraudel/pen/vEJXGm</a>) in order to arrange a few items in a circle. I want create an animation to rotate the circle however keep the elements inside upright as it rotates.</p>
  <p>So I thought I could use simple jQuery to do a css &quot;transform: rotate()&quot; and then use the same thing with a negative rotation on the elements inside, however because of the way the demo is set up, the inner elements are moved to the center of the whole circle when rotated.</p>
  <pre><code>$('.button').click(function() {
    $('.box').animate(
      { deg: 72 },
      {
        duration: 1200,
        step: function(now) {
          $(this).css({ transform: 'rotate(' + now + 'deg)' });
        }
      }
    );
  });
  </code></pre>
  <p>Alternatively, is there a way to use jQuery to change the value of the &quot;$rot&quot; variable? I sass variables can't be accessed by js but maybe there is a workaround?</p>