title: Rotating an img that has absolute position
body: <p>I am making a circle div that has images along the outside of the div. Using javascript, I rotate it a quarter every 4 seconds. In order to keep the images from tilting, I am rotating them the opposite direction. This works in keeping them from tilting, but it causes them to move form being on the perimeter of the circle. I think this is because the position is absolute. Any advice?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>amount=0;
  ids=['box1','box2','box3']
  
  setInterval(rotate, 4000);
  ///clearTimeout(time);
  
  function rotate() {
  
    document.getElementById("graphicContainer").setAttribute("style", "transform: rotate(" + amount * 2 * Math.PI / (ids.length).toString() + "rad)");
  
    document.getElementById("box1").setAttribute("style", "transform: rotate(" + -amount * 2 * Math.PI / (ids.length).toString() + "rad)");
    document.getElementById("box2").setAttribute("style", "transform: rotate(" + -amount * 2 * Math.PI / (ids.length).toString() + "rad)");
    document.getElementById("box3").setAttribute("style", "transform: rotate(" + -amount * 2 * Math.PI / (ids.length).toString() + "rad)");
  
    amount = amount + 1;
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#graphicContainer div img {
    width: 50px;
    position: absolute;
    transition: all 1.75s ease-in;
    transform-origin: center;
  }
  
  #graphicContainer {
    position: relative;
    height: 500px;
    width: 500px;
    border: 1px solid black;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top-right-radius: 50%;
    transition: all 1.75s ease-in;
    transform-origin: center;
    margin: 0px;
  }
  
  #box1,
  #box2,
  #box3 {
    transform-origin: center;
    position: relative;
    transition: all 1.75s ease-in;
    animation-direction: reverse;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="graphicContainer"&gt;
  
    &lt;div class="box" id="box1"&gt; &lt;img id="goalsGraphic" src="../images/running.jpg"&gt; &lt;/div&gt;
  
    &lt;div class="box" id="box2"&gt; &lt;img id="workGraphic" src="../images/work.jpg"&gt; &lt;/div&gt;
    &lt;div class="box" id="box3"&gt; &lt;img id="progressGraphic" src="../images/progress.jpg"&gt; &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>There should be two other small images on the circle, but they are moving in their own circles instead below the screenshot view.
  <a href="https://i.stack.imgur.com/Z0AFJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z0AFJ.png" alt="enter image description here"></a></p>