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

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

好的，所以我假设您有一个定义为 value 的全局变量

如果您愿意，可以使用以下代码以 90 度为增量旋转：

var value = 0;
$('#rotate-btn').click(function (e) {
    var element = $("#image_canv");
    var startDegree = value;
    var endDegree = value + 90;
    value += 90;

    $({ i:startDegree }).animate({ i: endDegree }, {
         step: function(now,fx) {
               element.css({transform : 'rotate('+ now + 'deg)' }); 
         },
         duration: 1000
    });
});

这是一个工作示例：http://jsfiddle.net/hQHhf/4/

如果您需要以其他增量旋转，则需要稍微更改代码以适应这些需求。但基本上，您的 value 变量最终应该始终与 endDegree 相同，以便下一次旋转将从图像的正确位置开始。

如果您想要进行不同程度的旋转，包括正向和/或负向旋转，这是一个如何使用它的示例（为此，我将 rotate-btn 的 id 更改为一个类，并赋予它自己的功能旋转任意度数）：

var value = 0;
$('.rotate-btn').click(function (e) {
    doRotate($(this).val(), 1000);
});

function doRotate(degrees, delay) {
    var element = $("#image_canv");
    var startDegree = value;
    var endDegree = value + parseInt(degrees);
    value = value + parseInt(degrees);

    $({ i:startDegree }).animate({ i: endDegree }, {
        step: function(now,fx) {
            element.css({transform : 'rotate('+ now + 'deg)' });
        },
        duration: delay
    }); 
}

这是一个例子：http://jsfiddle.net/hQHhf/6/

还对 HTML 进行了一些小修改，例如使用 <button> 而不是 <input> 向 doRotate 函数发送正确的值以及其他一些小修改。

希望这可以帮助您了解它的要点并根据您的需要应用它。另外，因为您在图像上设置了 400 的宽度和 300 的高度，而 chrome 似乎不受此影响，但其他一些浏览器（如 firefox）会受到影响。例如，当图像旋转时，尺寸也随之旋转，这是因为您的图像的宽度和高度的尺寸不相等，因此在所有浏览器中它看起来都不会自然旋转。如果将宽度和高度都设置为相同的尺寸，则不会出现此问题。

Answer 2

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

Answer 3

您可以使用此 javascript 代码轻松旋转图像。但您只需更改图像目的地。

var looper;
var degrees = 0;
function rotateAnimation(el,speed){

var elem = document.getElementById(el);

if(navigator.userAgent.match("Chrome")){
    elem.style.WebkitTransform = "rotate("+degrees+"deg)";

} else if(navigator.userAgent.match("Firefox")){
    elem.style.MozTransform = "rotate("+degrees+"deg)";

} else if(navigator.userAgent.match("MSIE")){
    elem.style.msTransform = "rotate("+degrees+"deg)";

} else if(navigator.userAgent.match("Opera")){
    elem.style.OTransform = "rotate("+degrees+"deg)";
} else {
    elem.style.transform = "rotate("+degrees+"deg)";
}
looper = setTimeout('rotateAnimation(\''+el+'\','+speed+')',speed);
degrees++;
if(degrees > 359){
    degrees = 1;
}
document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
}

现在使用图像的 HTML 代码：

<img id="exe" style='position:absolute;left:450px;height:300px;' src="images/example.png"   alt="exe">

它即将完成，只需添加另一个脚本标签：

rotateAnimation("exe",30);

上面的这个函数会将图像移动30度，你可以将其更改为40,50...并且“exe”是图像的ID。