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

我想创建一种效果，当我单击图像元素时，它将旋转其中的内容，而不旋转元素的宽度和高度（我的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);

});
});

它会旋转图像，但是元素的位置会移动，因此无法工作。

最佳答案

我使用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);
}