使用 javascript 旋转图像答案

【问题标题】：Rotate images with javascript使用 javascript 旋转图像
【发布时间】：2011-10-19 07:27:59
【问题描述】：

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

我有一个脚本。这将随机 li 项目放在具有固定位置的页面上。但是我可以给这个 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();

【问题讨论】：

标签： javascript jquery rotation

【解决方案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/

【讨论】：

【解决方案2】：

CSS3 具有轮换功能，但并非适用于所有浏览器。如果您没有附加到浏览器特定的功能，您可以使用它。

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

翻译成 jQuery，应该很好。

【讨论】：