javascript - 旋转图像而不旋转元素尺寸

Question

我想创建一个效果，当我点击一个图像元素时，它会旋转其中的内容而不是元素的宽度和高度(我的 img 是 400x300)。我希望元素尺寸保持不变，但图像会旋转。根据位置压缩图像的高度或宽度对我来说没问题，只要它不旋转元素本身。

我试过 jQueryRotate，但它似乎只是旋转元素，而不是其中的图像。

是否有任何插件或方法可以让我在不旋转元素本身的情况下旋转图像？

编辑:

我的代码:

$('#rotate-btn').click(function (e) {
    value += 90;
    if (value == 90) {
        var img = document.getElementById('image_canv');
        var width = img.clientWidth;
        var height = img.clientHeight;
        $('#image_canv').height(height);
        $('#image_canv').width(width); {
            animateTo: value
        }
    }
    $('#image_canv').rotate(value);

});
});

它确实旋转了图像，但元素的位置移动了，所以它不起作用。

Answer 1

我使用 id myimg 将其包装在 div 中然后旋转它。

http://jsfiddle.net/D5Sz8/

请注意，如果您不希望它们沿图像旋转，则可能需要将所有应用于图像的样式应用到 div 上。

jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
};


var i= $('img'), d= document.createElement('div'), rotation=0;
d.id='myimg'; i[0].id='';
i.wrap(d);
$('#myimg').css({'display':'inline-block', 'overflow':'hidden'});
ani();

function ani (){
    i.rotate(++rotation);
    requestAnimationFrame(ani);
}