Question

I have make a script. That set li items on different positions on the page. This positions are fixed positions. The positions are set in the array.

But this li items. Must have a rotate. I make a rotate with css3 transform. Every li item must have a fixed rotate. I put 8 fixed rotate positions in a array. But i have a problem. Every li item get the same rotate position. How can i fix. That every li item get a other fixed position of the array.

You can see the code here: click here

Or here is my code:

var images = [];

// Constructor for the "Position" structure
function Position(left, top) {
    this.left=left;
    this.top=top;
}

function rotate(object, degrees) {
    object.css({
  '-webkit-transform' : 'rotate('+degrees+'deg)',
     '-moz-transform' : 'rotate('+degrees+'deg)',  
      '-ms-transform' : 'rotate('+degrees+'deg)',  
       '-o-transform' : 'rotate('+degrees+'deg)',  
          'transform' : 'rotate('+degrees+'deg)',  
               'zoom' : 1
    });
}

// sortFunction routine to help randomize array
function rand(ar){
    return 0.5-Math.random();
}

// Array containing the 8 positions you want to use
var positionArray = [
      new Position(0,  0) 
    , new Position(50, 50) 
    , new Position(100,100) 
    , new Position(150,150) 
    , new Position(200,200) 
    , new Position(250,250) 
    , new Position(300,300) 
    , new Position(350,350) 
];

var rotateArray = [0, 15, 30, 40, 50, 60, 70, 80];

function init() {
    $('.friend-selection li > div').each(function(){

        var id = this.id;
        var img = $('#img_' + id);
        var imageIndex = parseInt(id.substring(id.length - 1))-1; // This is a hack because you're using "picture*" as the id

        $("#parent_" + id).css({ //apply the position to parent divs
            top     : positionArray[imageIndex].top,
            left    : positionArray[imageIndex].left
        });

        rotate($(".friend-selection li"), rotateArray[imageIndex]);
    });
};

positionArray.sort(rand);

init(); 

Answer 1

It should be

rotate($("#parent_" + id), rotateArray[imageIndex]);

Instead of:

rotate($(".friend-selection li"), rotateArray[imageIndex]);