CODEWITHSUNDEEP
javascriptjqueryhtmlcssrotation
Kōdo no musō-ka
Kōdo no musō-ka

Reputation: 779

HTML button which rotates characters

I want to have a button displayed on screen, next to a single character input field. When the user clicks on the button the character would rotate 1 degree, click it 5 times and it would rotate 5 degrees, hold it down and it would spin.

I would also love for the current degree of rotation to be displayed to the user (this is very important for what I want to build at the end).

Currently I have HTML: 

<h2 class="rotate10"> P</h2>

CSS: 

.rotate10{

    /* Safari */
    -webkit-transform: rotate(-10deg);

    /* Firefox */
    -moz-transform: rotate(-10deg);

    /* IE */
    -ms-transform: rotate(-10deg);

    /* Opera */
    -o-transform: rotate(-10deg);

    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Upvotes: 3

Views: 215

Answers (4)

dasjanik
dasjanik

Reputation: 326

Combining Nour's solution (which only listened to onClick) and the answer from this thread I created this fiddle: http://jsfiddle.net/ea6zycpk/

var angle = 1;    
var timeoutId = 0;
var timeoutId2 = 0;

$('#line').mousedown(function() {
    timeoutId = setInterval(rotate, 20);
    timeoutId2 = setInterval(update, 20);
}).on('mouseup mouseleave', function() {
    clearInterval(timeoutId);
    clearInterval(timeoutId2);
});

function rotate() {
    $('#line').find('span').css ({
        '-webkit-transform': 'rotate(' + angle + 'deg)',
           '-moz-transform': 'rotate(' + angle + 'deg)',
             '-o-transform': 'rotate(' + angle + 'deg)',
            '-ms-transform': 'rotate(' + angle + 'deg)'
    });
    angle+=1;
};

function update() {
  $('#angle').text(angle);
}

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122087

Try something like this 

var count = 0;
var target = $('h2');

$('button').mousedown(function(){
    target = setInterval(function(){
       count++;
       $('h2').css('transform', 'rotate('+count+'deg)');
       $('p').text('Rotated ' + count + 'deg');
    }, 100);
    return false;
});

$(document).mouseup(function(){
    clearInterval(target);
    return false;
});
button {
  display: block;
}

p {
  margin: 0;
}

h2 {
  display: inline-block;
  transform-origin: center;
  font-size: 50px;
  margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Rotate</button>
<p>Rotated 0deg</p>
<h2 class="rotate10">P</h2>

Upvotes: 5

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

<button id="ex" style="width:40px">
  hello
</button>

js

 var count=1
    $("#ex").on("click",function(){
        $("#ex").css({"-ms-transform":" rotate("+10*count+"deg)"});
      $("#ex").css({"-webkit-transform":" rotate("+10*count+"deg)"});
      $("#ex").css({"transform":"rotate("+10*count+"deg)"});
      count++;
    });

Upvotes: 3

Nour Sammour
Nour Sammour

Reputation: 2852

you need to assign transform css property on click

http://jsfiddle.net/NourSammour/pu58xsmg/6/

var angle = 10;    

$('#line').click(function() {
    $(this).find('span').css ({
        '-webkit-transform': 'rotate(' + angle + 'deg)',
           '-moz-transform': 'rotate(' + angle + 'deg)',
             '-o-transform': 'rotate(' + angle + 'deg)',
            '-ms-transform': 'rotate(' + angle + 'deg)'
    });
    angle+=10;
});

to display the current angle/degree you can display angle variable

Upvotes: 5

Related Questions