Question

我正在创建一些东西，要求最终用户使用鼠标移动对象，更改其大小并旋转对象。除了旋转之外，大部分内容都可以使用JqueryUI (here)之类的东西来实现。我需要用户能够旋转对象。

一个选项是设置一个调整CSS变换属性的滑块，但如果有一种方法可以更直观的方式（la powerpoint / photoshop）这样做，那就太棒了。

有办法做到这一点吗？

Answer 1

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

Answer 2

这样的东西？ http://jsfiddle.net/38ZsD/

它是JS和CSS的混合物，可以做你想要的。

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

}）;

使用CSS中的转换类

浏览器中用户可旋转的元素

2 个答案: