Может ли jQuery повернуть картинку на 10 градусов?
 

Можно ли средствами jQuery повернуть картинку на несколько градусов по часовой стрелке?
Или может посоветуете использовать что-то другое? (кроме Flash)

Задача:
Нарисовать подъёмный кран (на колёсах) который подъезжает к дому, поднимает стрелу, как телескопическую удочку раздвигает её, и поднимает ящик на дом...
При этом изначально клиент вводит 2 параметра:
1) Высота дома
2) Расстояние от дома до крана
тоесть от этого зависит насколько будет выдвину стрела крана и под каким углом она будет стоять (грубо говоря пользователь задаёт два катита в прямоугольном теугольнике, где гипатинуза - это стрела крана).

Наверно любая графика оптимальна на Flash, но он не подходит, так как с iPhone, iPad работать не будет, а HTML5 не идёт на IE8. В jQuery могу зделать всё, кроме поворота стрелы подъёмного крана. Подскажите как или посоветуйте что-то другое...

zebra741258963,
http://raphaeljs.com/image-rotation.html

Огромное спасибо, рони!
Хотя там много чего плохо работает на IE8 (например Polar Clock работает со сбоем, поворот мухи происходит с огромным передёргиванием под конец поворота, а там где отражение мухи - отражение вообще не выводится, и в других местах по разному отображается на iPad и IE8)
Теперь уверен что сделаю то что мне надо!

Но может кто-то поделится просто своим мнением, как бы он делал раздвижение срелы или удочки под наклоном?

Я пока планирую взять неколько слоёв (в каждом будет одно колено стрелы/удочки) и придумаю формулу по которой они раздвигаются (выезжают одна из под другой) до нужной длинны.

Но может кто-то решал бы задачу по другому? Может на флеше, может на Java аплете, поделитесь как подошлибы к задаче?

Поработал с Рафаэлом, и честно скажу - ОЧЕНЬ ГЛЮЧНАЯ вещь...
Ну по мимо того что часть функций не идёт на IE8 (хотя они прописаны в коде, но за час поисков я так и не нашёл почему он ругается "Function expected").

Главное хотел сказать по поводу поворотов - да, поворачивает... Но:

1) При повороте верхняя часть картинки будет отдаваться в нижней. Например если у вас вверху проходит чёрная линия - после поворота внизу увидите тёмный кантик, и наоборот, если внизу картинка не прозрачная - то этот цвет после поворота вы увидите вверху.

2) При анимированном повороте забудьте про движение! Картинка будет нормально поворачиваться, но ехать будет в какую-нибудь другую сторону. Зато в последнее мгновение станет именно туда куда вы её просили. Тоесть по сути можно выполнять только без анимации.

3) И не дай бог вам попробывать сдвинуть с места картинку после того как вы её повернули - узнаете много нового... Он поставит вашу картинку на прежнее место, и срежет вашу картинку по высоте до уровня поворота (например если вы повернули на 60 градусов, то по высоте ополовинет), и после этого как бы размножит её как повторяющиеся обои, причём будет вырезать из этих обоев фрагмент изначальной высоты (и через этот двигающийся фрагмент вы будете видеть урезанную картинку растиражированную как обои).

Короче жесть! Какие-то действия выполнять можно, но вращать и после этого двигать - нельзя...

канву на весь экран раздвинте, и двигайте как душа пожелает. Либо двигайте саму канву.

Могу я тогда спроисть у сообщества, что они видят при выполнении данного кода?

<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<script>
window.onload = function () {
var R = Raphael(0,0, 640, 640);
var el = R.rect(200, 200, 300, 300);
el.animate({transform:"r45t100,0"},1000,function(){  el.animate({transform:"t100,0"},1000);  } );
}
</script>

Библиотека подгружается прямо с сайта разработчика.
Создаю область рисования 640х640
Рисую квадрат 100х100
Поворачиваю его на 45 градусов и сдвигаю на 100 точек относительно поворота

и... вот тут что вы видите? Может это только в IE8 глюки?

Он должен подняться вверх на позицию смещённую на 100 точек от места создания...

А у меня он (почему-то вначале уменьшаясь потом увеличиваясь) крутится на месте и потом одним одним скачком перемещается в нужную позицию.

не совсем понимаю что ты хочешь

<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<script>
window.onload = function () {
    var R = Raphael(0,0, 640, 640);
    var el = R.rect(200, 200, 300, 300);
    el.animate({
        transform: "r45",
        y: "100"
    },1000,function(){
        el.animate({
            transform: "r0"
        },1000);
    } );
}
</script>

Мне кажется я довольно подробно описал те движения которые я хотел получить. Ты предложил несколько другой подход...
В моём примере движение идёт относительно текущего положения объекта (тоесть будет передвигать на 100 точек относительно текущего положения объекта).
В твоём случае, движение происходит в точку с координатой 100.
Но это мелочи...
Можно попросить тебя сделать одно изменение в твоём коде?
Поменяй - var el = R.rect(200, 200, 300, 300);
на строку - var el = R.circle(200, 200, 100);
Казалось всего лишь поменял квадрат на круг. А он уже никуда не двигается! :-?

Вообще на jQuery есть специальный модуль JQuery.rotate. Поищи в google. Самое главное Raphel не нужн!!!