Rotation around a circle defines degrees and positions.

Question

I worked to make divs rotate around a circle to a given value.

• Here is the script: http://jsfiddle.net/TMuD5/2/

However, it seems that I have reached the end of my skill level. I am only the youngest in JS / JQuery, so please be careful.

If you look at Fiddle, you will see four links below. If you press the first one, that will put the squares one space to the left. It works great. However, it only works once. I used:

$("#box" + i).data('position', degreeRot);

to add the current location to the data attribute, but it doesn't seem to work. I would not even recommend pressing the right button.

So, I have a few questions, if you do not mind helping me.

---

• 1) Why doesn't he add a new degree to the data-position attribute? and how can I get him to keep him going as soon as one step at a time.
• 2) I used - = for the correct selection of fields, but they do not fit. Why is this?
• 3) How can I make it move 2 or 3 spaces at a time?

---

Thanks in advance. I really would appreciate all the help and advice :)

Answer 1

There are a lot of errors in your code, but, in particular, I think that you complicate it too much using the material on the left / right. Just use a positive or negative numeric value to indicate the amount of rotation:

<p class="worldMenuPosition " data-spaces="-1" id="box1">Rotate one space left</p>
<p class="worldMenuPosition" data-spaces="1" id="box2">Rotate 1 space right</p>
<p class="worldMenuPosition " data-spaces="-2" id="box1">Rotate two spaces left</p>
<p class="worldMenuPosition" data-spaces="2" id="box2">Rotate 2 spaces right</p>

, :

$(document).ready(function () {
    var currentRotation = -35,
        rotationIncrement = 35;

    $(".worldMenuPosition").click(function () {
        var spaces = $(this).data("spaces");

        rotateToDirection(spaces * rotationIncrement);
    });

    function rotateToDirection(deg) {
        currentRotation += deg;

        positionBoxes();
    }

    function rotateTo(deg, box) {
        var bplate = ["translate(-50%,-50%) rotate(", deg,
                      "deg) translateY(-200px) rotate(", -5, "deg)"];

        $(box).css({
            "transform": bplate.join("")
        });
    }

    function positionBoxes() {
        $(".worldSection").each(function (index, element) {
            rotateTo(currentRotation + (index * rotationIncrement), element);
        });
    }

    // Initialize positions
    positionBoxes();
});

http://jsfiddle.net/TMuD5/9/

, .

, "" , data-position 4 , " ". " " 35 data-position 4 , , " "

box1 - -70, -35, 0, 35, 70, ...
box2 - 0, 70, 140, 210, 280, ...
box3 - -70, 35, 140, 245, 350, ...
box4 - 0, 140, 280, 420, 560, ...

, , " ", -35 ( ), 0 , 35 .. 35 .

"" , , 35 . .