How can I make 4 elements rotate in a circle?

Question

First of all I would like to say I am a complete beginner to jquery. I would like to make these divs move round in a circle in a clockwise direction with a 500px diameter. How could i go about doing this?

<div id="move0" class="textBox"></div>
<div id="move1" class="textBox"></div>
<div id="move2" class="textBox"></div>
<div id="move3" class="textBox"></div>

Please look at my website http://tragicclothing.co.uk/T-Shirts.html This is what I want to be able to happen

Steps:

1. Click on button in centre
2. Images appear around this button (fade in)
3. Rotate images slowly around this button

Answer 1

This works for me, and you can add as many INPUT elements in the HTML as you need.

(Update: the JSFiddle link.)

// fetch all DIV.txtBoxRotate elements inside DIV#txtBoxRotateContainer
var txt = $('#txtBoxRotateContainer .txtBoxRotate'), txtLen = txt.size();
// utility functions to convert degrees to radians    
var deg2rad = function(a) { return a*Math.PI/180.0; }
// rotation settings
var angle = 0, speed = 1, delay = 10, r = 250;

(function rotate() {
    for (var i=0; i<txtLen; i++) {
        // we know how many elements we have, so we will add an even
        // amount of degrees of angle for each of them to complete a circle
        var a = angle + (i * 360 / txtLen);
        // we reposition our element by using {sin(a),cos(a)} for our initial
        // position. If you want to change direction, switch to {cos(a),sin(a)}!
        // then we multiply the x,y by our radius and add our radius to center
        // then element. You may add another offset if you want (ex: y+r+(Math.sin...)
        $(txt[i]).css({top: r+(Math.sin(deg2rad(a))*r), left: r+(Math.cos(deg2rad(a))*r)});
    }
    // increment our angle and use a modulo so we are always in the range [0..360] degrees
    angle = (angle + speed) % 360;
    // after a slight delay, call the exact same function again
    setTimeout(rotate, delay);
})();  // invoke this boxed function to initiate the rotation

#txtBoxRotateContainer { height: 800px; }
.txtBoxRotate { position:absolute; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="txtBoxRotateContainer">
    <div class="txtBoxRotate"><img src="http://www.google.com/logos/2012/uganda12-hp.jpg" alt="Google!" /></div>
    <div class="txtBoxRotate"><img src="http://www.google.com/logos/2012/Googles_14th_Birthday-2012-2-hp.gif" alt="Google!" /></div>
    <div class="txtBoxRotate"><img src="http://www.google.com/logos/2012/bohr11-hp.jpg" alt="Google!" /></div>
</div>

Note: the original code had INPUT elements (because this is what I assumed with your class="textBox"), thus the id and CSS class names. You may use whatever naming you want.

Answer 2

    $(document).ready(function() {
      var elements = $('.textBox');
      var length = elements.length;
      var offsetX = 300;
      var offsetY = 300;
      var radius = 250; //radius = diameter(500px) / 2 
      var incr = Math.PI * 2 / length;
      var progress = 0;

      setInterval(function() {
        progress++;
        elements.each(function(i) {
          $(this).css({
            top: offsetY + Math.sin(i * incr + ((progress / 100) * Math.PI * 2)) * radius,
            left: offsetX + Math.cos(i * incr + ((progress / 100) * Math.PI * 2)) * radius
          });
        });
        if (progress >= 100) {
          progress = 0;
        }
      }, 50);
    });

.textBox {
  position: absolute;
  width: 50px;
  height: 50px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="move0" class="textBox"></div>
<div id="move1" class="textBox"></div>
<div id="move2" class="textBox"></div>
<div id="move3" class="textBox"></div>

Answer 3

Note: This is not my code, but was written by Lea Verou on her respective blog.

CSS3-only circular animation

This particular JSFiddle shows one element being rotated around some central point. CSS of it is actually really simple:

@keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

@keyframes inner-circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(-360deg); }
}

body > div {
    width:100px;
    height:100px;
    margin: 20px auto 0;
    color:orange;
    font-size:100px;
    line-height:1;
    animation: circle 5s linear infinite;
    transform-origin:50% 200px;
}

div > div {
    animation: inner-circle 5s linear infinite;
}

<div><div>☻</div></div>

Basically all you'd have to do is convert these to CSS classes and then just add a click handler on your central button that would fade-in your images around it and add a CSS class to them so they would start rotating as well.