Поворот изображения без поворота размеров элемента

Вы можете использовать этот код 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);

Эта функция выше перемещает изображение 30deg, вы можете изменить его на 40,50... и "exe" - это идентификатор изображения.

Итак, я предполагаю, что у вас есть глобальная переменная, определенная как 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 на класс вместо этого и дал ему свою собственную функцию для поворота на любые градусы):

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 на изображениях, в то время как хром не работает, но некоторые другие браузеры, такие как firefox, будут. Например, когда изображение вращается, размер вращается вместе с ним, потому что у вас нет равного размера по ширине и высоте вашего изображения, поэтому он не будет выглядеть так, как он вращается естественным образом во всех браузерах. Если вы дадите оба, ширину и высоту, того же размера у вас не будет этой проблемы.

Я беру изображение с 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);
}