使用javascript旋转图像

Question

可以使用javascript旋转li项目吗？

我有一个脚本。这将随机李项目放在具有修复位置的页面上。但我可以给这个李项目轮换。我想给每个项目另外一个轮换。我怎么能给这八个项目一个固定的位置。

这是我的脚本：

var images = []; 

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

     // 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) 
     ]; 

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


     // Randomize array - http://stackoverflow.com/questions/7802661 
     positionArray.sort(rand); 

     init(); 

Answer 1

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 

    }); 
} 

要调用的功能，例如：

rotate($("#image1"), 15)

的jsfiddle：http://jsfiddle.net/hLqJb/

Answer 2

CSS3具有旋转可用性，但是它并不适合所有的浏览器。如果你没有附加到浏览器的特定功能，你可以使用它。

-webkit-transform: rotate(15deg); 
-moz-transform:rotate(15deg); 
-o-transform:rotate(15deg); 
-ms-transform:rotate(15deg); 
transform:rotate(15deg); 

转换为jQuery，应该很好去。