Вращение изображений при помощи Javascript

Это устаревший пост, перенесённый из старой версии сайта. Ссылки, примеры кода и другая информация в нём, вероятнее всего, потеряли актуальность.

Довольно давно я задумался о решении такой задачки: необходимо при помощи ява-скрипта поворачивать картинку на заданный угол. Сейчас нашел её решение — плагин wilq32 для jQuery, позволяющий как просто поворачивать картинки, так и создавать анимированное вращение:

<div>
  <img src="/old-site/examples/rotate/eye-small.jpg" id="image">
  <img src="/old-site/examples/rotate/eye-small.jpg" id="image2">
  <img src="/old-site/examples/rotate/eye-small.jpg" id="image3">
</div>

Использовать плагин предельно просто, он реализует две функции rotate и rotateAnimation, которые принимают ряд параметров, детально описанных в документации.

Например, для поворота изображения достаточно использовать код:

$('#image').rotate(-25);

где “#image” — id изображения, которое мы хотим повернуть, а -25 — угол поворота.

Немного более сложный пример. Поворачиваем изображение при наведении на него курсора мышки и возвращаем его в исходное состояние, когда курсор не находится над изображением:

var rot=$('#image3').rotate({
    bind:
        [
            {
                "mouseover":
                    function() {
                        rot.rotateAnimation(35);
                    }
            },
            {
                "mouseout":
                    function() {
                        rot.rotateAnimation(0);
                    }
            }
        ]
});

Скачать плагин можно на сайте автора. В комментариях к плагину приведены примеры его использования.

К сожалению, на данный момент, плагин может глючить в IE, но автор обещает исправить эту недоработку к релизу плагина (пока доступна версия 0.5).

Версию этого плагина для библиотеки mootools можно найти тут: http://www.piksite.com/mRotate/.

Обновление. Несколько дней назад стала доступна версия 0.7 плагина. В ней немного изменился метод вызова анимации, а также исправлены глюки из-за которых плагин не работал в Internet Explorer.