Нельзя сказать, что темой вращения картинок с помощью JavaScript никто не занимался. Для jQuery существуют как минимум 2 плагина –jquery.rotate и Wilq32.RotateImage, они работают почти кроссбраузерно и с помощью них можно даже сделать анимированный поворот изображения.
Вот как выглядит поворот картинки с помощью jquery.rotate:
$('#image').rotateRight(45);
А вот как с помощью Wilq32.RotateImage:
$('#image').rotate(45);
Но почему бы не сделать rotate более «нативным» (по крайней мере выглядящим более нативно) для jQuery? Ведь сделали же возможность задать элементу opacity (прозрачность) в стилях или даже сделать анимированное изменение прозрачности для элемента, хотя прозрачность и не входит в свойства style ни одного DOM элемента. Слегка дополнив Wilq32.RotateImage мы получили возможность задавать rotate любой картинке через атрибут либо через jQuery метод css или даже сделать анимацию. Скачать апгрейженный Wilq32.RotateImage можно здесь. Вот как выглядит вращение картинок с помощью новой версии плагина:
Метод css
$('#test1').css({ rotate : -20});
Атрибут
<img src="test2.jpg" rotate="30" id="test2" />
Анимация
$('#test3').bind('click',function(){ $('#test3').animate({ rotate : '-30'}, 400) })
Кликните на изображение и оно повернётся.
Для того, чтоб скрипт корректно работал, вставьте следующие строчки сразу после тэга <body>:
<style type="text/css">v\:image { behavior:url(#default#VML); display:inline-block }</style>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />У нового варианта плагина существуют следующие слабые стороны:
- $(‘#test’).css({ rotate : -60}).css({ rotate : -90}) не заработает
- $(‘#test’).css({ rotate: ‘-10′ }).animate({ rotate : ‘-70′}) не заработает
- $(‘#test’).css({ rotate : -60}); не заработает, если до этого в описании изображения был использован атрибут rotate
- При вращении изображения, сбрасываются все его стили.
Это особенно плохо, если необходимо использование стилей position, top, left, margin и padding
Да пребудет с Вами Сила!