How can I make 4 elements rotate in a circle?

Question

First of all, I would like to say that I am a complete newbie to jquery. I would like these divs to move in a circle clockwise with a diameter of 500 pixels. How could I do 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 see my website http://tragicclothing.co.uk/T-Shirts.html This is what I want to be able to

Steps:

• Press the button in the center
• Images appear around this button (disappear)
• Rotate images slowly around this button.

Answer 1

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

CSS3 only circular animation

This particular JSFiddle shows that one element rotates around some center point. The CSS of this is actually very 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 have to do is convert them into CSS classes, and then just add a click handler on the center button that will disappear in your images around it and add a CSS class to them so that they start to rotate as well.

Answer 2

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

( Update : 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 source code had INPUT elements (because this is what I assumed with your class="textBox" ), thus the id and CSS class names. You can use any naming you want.

Answer 3

  $(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>