Поворот изображения без размеров вращающегося элемента

Question

Я хочу создать эффект, который, когда я нажимаю на элемент изображения, будет вращать содержимое внутри него, но не ширину и высоту элемента (My img is 400x300). Я хочу, чтобы размеры элементов остались, но изображение вращается. Сжатие высоты или ширины изображения в зависимости от положения отлично подходит для меня, если оно не вращает сам элемент.

Я пробовал jQueryRotate, но кажется, что он только вращает элемент, а не изображение внутри него.

Есть ли какой-либо плагин или способ для вращения изображения без поворота самого элемента?

EDIT:

Мой код:

$('#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

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

Answer 2

Я беру изображение с идентификатором 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); 

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