Пользовательские элементы в браузере

Question

Я создаю то, что требует от конечного пользователя перемещения объектов вокруг с помощью мыши, изменения их размера и поворота объекта. Большая часть этого может быть достигнута с использованием чего-то вроде JqueryUI (here), за исключением вращения. Мне нужно, чтобы пользователь мог поворачивать объекты.

Один из вариантов - установить слайдер, который корректирует свойства преобразования CSS, но если есть способ сделать это более интуитивно понятным способом (a la powerpoint/photoshop), было бы здорово.

Есть ли способ сделать это?

Answer 1

Что-то вроде этого? http://jsfiddle.net/38ZsD/

Это смесь JS и CSS, чтобы делать то, что вы хотите.

$('.rotate').click(function() { 
$(this).toggleClass('rotated'); 

});

И использовать класс преобразования в CSS

Answer 2

http://jsfiddle.net/avPf6/1/ другое решение с помощью перетаскивания, способная ручку.

// Your original element 
var ele = $('#selector'); 

$('#selector').draggable({}); 

// Create handle dynamically 
$('<div></div>').appendTo(ele).attr('id','handle').css({ 
'position': 'absolute', 
'bottom': 5, 
'right': 5, 
'height': 10, 
'width': 10, 
'background-color': 'orange' 
}); 

ele.css('position', 'relative'); 

$('#handle').draggable({ 
handle: '#handle', 
opacity: 0.01, 
helper: 'clone', 
drag: function(event, ui){ 
    var rotateCSS = 'rotate(' + ui.position.left + 'deg)'; 

    $(this).parent().css({ 
     '-moz-transform': rotateCSS, 
     '-webkit-transform': rotateCSS 
    }); 
} 
});