На днях столкнулся с вопросом — как повернуть изображение на угол, не изменяя его — в голову сразу пришла идея, что скорее всего это должно быть вращение изображений с помощью JavaScript. Однако первые поиски успехом не увенчались, пока спустя день мне не подкинули ссылку на плагин jQueryRotate для фреймворка jQuery.

В этом посте я хочу рассказать немного о том, как легко и непринуждённо работает эта интересная вещица:

Итак, естественно, для работы jQueryRotate, как и любого другого плагина или скрипта на jQuery, необходимо подключить файл с библиотекой фреймворка, указав его в <head> страницы, например так:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Далее скачиваем файл плагина с ресурса Google Code: http://code.google.com/p/jqueryrotate/ и подключаем его к странице, на которой будем крутить-вертеть картинки:

<script type="text/javascript" src="/путь_к_файлу/jQueryRotate.js"></script>

Для применения нужного угла вращения изображения, указываем параметры, например:

<script type="text/javascript">
$(document).ready(function()
{
	$('#image').rotate(30);
});
</script>

В этом примере поворачиваемое изображение должно иметь id="image". Также стоит пояснить, что в данном случае — rotate — угол поворота изображения. Этот параметр может принимать отрицательные и положительные значения (по 180 в каждую сторону).

Результат не заставит себя долго ждать, и если вы сделали всё правильно, то у вас получится нечто вроде:

"jQueryRotate

Если же что-то пошло не так, как вы себе это представляли, мой совет — повторите процесс заново.

Кстати, другие примеры использования jQuery Rotate, вплоть до анимации, можно глянуть тут.