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

我是新手,我正在进行第一个项目:

我有三个元素(图像)和一个标志。

当我点击图像时,这一个和另外两个应该围绕徽标在360°的轨道上移动(当它们在徽标背面时具有低z-index,因此它们可以消失然后再出现)。

这有可能与jquery和css3?

Hiya 2演示从简单开始:

1) (使用div) http://jsfiddle.net/ErN8X/2/show&code:http://jsfiddle.net/ErN8X/2/

2) http://jsfiddle.net/qXP7H/show/和代码: http : //jsfiddle.net/qXP7H/

请看这里: jQuery插件使元素轨道成为另一个?

对于第二个演示,您可以从jsfiddle复制粘贴代码。 rest这应该有所帮助,有一个好的,如果这有帮助,不要忘记接受答案。 🙂

Jquery简单演示

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); ​