HELP с перемещение фигур!

[TeslaGR]

Приветствую! Помогите разобратья пожалуйста. Есть такой код:

HTML

<div>
<img id="tr1"/>
</div>

<div>
<img id="tr2"/>
</div>

<div>
<img id="tr3"/>
</div>

CSS

#tr1 { position: absolute;
width: 0;
  	height: 0;
    border-left: 60px solid transparent;
  	border-right: 60px solid transparent;
  	border-bottom: 100px solid red;
    margin-left:60px;
   }

#tr2 { position: absolute;
width: 0;
  	height: 0;
    border-left: 60px solid transparent;
  	border-right: 60px solid transparent;
  	border-bottom: 100px solid red;
    margin-top:100px;
}

#tr3 { position: absolute;
width: 0;
  	height: 0;
    border-left: 60px solid transparent;
  	border-right: 60px solid transparent;
  	border-bottom: 100px solid red;
    margin-top:100px;
    margin-left:120px;
}

JS

var t = 0;
var tt = 0.02;
var r = 50;

function moveit1() {
    t += tt;

    
    var xcenter = 100;
    var ycenter = 100;
    var newLeft = Math.floor(xcenter + (r * Math.cos(t)));
    var newTop = Math.floor(ycenter + (r * Math.sin(t)));
    $('#tr1').animate({
        top: newTop,
        left: newLeft,
    }, 1, function() {
        moveit1();
    });
}

function moveit2() {
    t += tt;

  	 var xcenter = 100;
    var ycenter = 100;
    var newLeft = Math.floor(xcenter + (r * Math.cos(t)));
    var newTop = Math.floor(ycenter + (r * Math.sin(t)));
    $('#tr2').animate({
        top: newTop,
        left: newLeft,
    }, 1, function() {
        moveit2();
    });
}

function moveit3() {
    t += tt;

    var xcenter = 100;
    var ycenter = 100;
    var newLeft = Math.floor(xcenter + (r * Math.cos(t)));
    var newTop = Math.floor(ycenter + (r * Math.sin(t)));
    $('#tr3').animate({
        top: newTop,
        left: newLeft,
    }, 1, function() {
        moveit3();

Тут получается 3 треугольника, которые организуют один большой треугольник и вся эта конструкция вращается по кругу. А нужно, чтобы центры этих треугольников вращались под одной круговой траектории.
Вот так...