Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   HELP с перемещение фигур! (https://javascript.ru/forum/css-html/78700-help-s-peremeshhenie-figur.html)

TeslaGR 22.10.2019 16:20

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

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 треугольника, которые организуют один большой треугольник и вся эта конструкция вращается по кругу. А нужно, чтобы центры этих треугольников вращались под одной круговой траектории.
Вот так...


Часовой пояс GMT +3, время: 04:15.