画像をjavascriptで回転させます

Question

javを使ってliアイテムを回転できますか？

私はスクリプトを持っています。これにより、固定された位置にあるページにランダムなアイテムが配置されます。しかし、私はこのli項目に回転を与えることができます。私はすべてのアイテムに別の回転を与えたい。どのように私はこの8つのアイテムに固定位置を与えることができます。

これは私のスクリプトです：

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に翻訳してください。