CODEWITHSUNDEEP
javascriptjquerycssrotation
user5844810
user5844810

Reputation:

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 ?

UPDATE : I see this question that is exactly what i wanted .But i don't know how to implement it . jQuery: Detecting pressed mouse button during mousemove event

Upvotes: 1

Views: 5125

Answers (1)

Aytee
Aytee

Reputation: 567

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/

Upvotes: 1

Related Questions