Felix Felix - 1 month ago 25
jQuery Question

Text rotation using jquery

Hi currently i write code to text rotate using jquery ,

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
$(this).css({'transform' : 'rotate('+ degrees +'deg)'});
};

$('.resizeButton').click(function() {
rotation += 5;
$('.new-div').rotate(rotation);
});


Please see this . https://jsfiddle.net/felixtm/2mpjkxad/3/

But here text rotation happening on mouse click to that resize button . Instead of that mouse click user able to rotate the text as usual rotation event. ie. use click the button rotate it as he wish . Here he need to click it many times for one major rotation . How it can be done ?

Answer

Try something like this:

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
};

$('.resizeButton').on("mousedown", function(e) {
    var startX = e.pageX;
    $(document).mousemove(function(e){
        rotation = startX - e.pageX;
        $('.new-div').rotate(rotation);
    });  
});
$('.resizeButton').on("mouseup", function(){
    $(document).unbind( "mousemove" );
});

https://jsfiddle.net/p9wtmfhp/