Éléments pouvant être pivotés par l'utilisateur dans le navigateur

Question

Je crée quelque chose qui nécessite que l'utilisateur final déplace des objets à l'aide de sa souris, change leur taille et fasse pivoter l'objet. La plupart de ceci peut être accompli en utilisant quelque chose comme JqueryUI (here) excepté la rotation. J'ai besoin de l'utilisateur pour pouvoir faire pivoter des objets. Une option consiste à mettre un curseur qui ajuste les propriétés de la transformation CSS, mais s'il y a un moyen de le faire de manière plus intuitive (à la powerpoint/photoshop), ce serait génial.

Existe-t-il un moyen de le faire?

Answer 1

Quelque chose comme ça? http://jsfiddle.net/38ZsD/

C'est un mélange de JS et CSS pour faire ce que vous voulez.

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

});

Et utiliser la transformation classe en CSS

Answer 2

http://jsfiddle.net/avPf6/1/ est une autre solution à l'aide d'une poignée capable de glisser.

// 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 
    }); 
} 
});