如何围绕徽标创建三个元素的轨道

Question

I'm a newbie and I'm on my first project:

I have three elements (images) and a logo.

When I click on an image this one and the other two ones should move in an orbit of 360° around the logo (with a low z-index when they go on the back of the logo so they can disappear and then reappear).

Is this possible with jquery and css3?

Answer 1

Hiya 2 demos starts with simple:

1) (using divs) http://jsfiddle.net/ErN8X/2/show & code: http://jsfiddle.net/ErN8X/2/

2) http://jsfiddle.net/qXP7H/show/ and code: http://jsfiddle.net/qXP7H/

Please see here as well: jQuery plugin to make an element orbit another?

For the second demo you can copy paste the code from jsfiddle. rest this should help, have a nice one, and don't forget to accept answer if this helps.! :)

Jquery for simple demo

var angle = 0;     // starting position (degrees)
var distance = 30; // distance of b from a
var speed = 60;    // revolution speed in degrees per second
var rate  = 10;    // refresh rate in ms

function f() {

    var o = $('#a').offset();

    var t = o.top + (distance * Math.sin(angle * Math.PI/180.0));
    var l = o.left+ (distance * Math.cos(angle * Math.PI/180.0));

    $('#b').css({
        top: t,
        left: l
    });
    $('#c').css({
        top: t + 20,
        left: l + 30
    });
    $('#d').css({
        top: t +40,
        left: l +40
    });
    angle += (speed * (rate/1000)) % 360;
}

setInterval(f, rate);
​