HTML button which rotates characters

Question

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

Did you tried something with javascript ? – Simon M. Feb 26 '16 at 13:11 — Simon M., Feb 26 '16 at 13:11

score 5 · Answer 1 · answered Feb 26 '16 at 13:17

5

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

answered Feb 26 '16 at 13:17

Nour Sammour

2,822
1
20
19

Excellent, however; how would i get it working for multiple characters? a b c – Kōdo no musō-ka Feb 26 '16 at 13:27
you can remove the span and apply rotate on the button itself so 1- remove .find('span') from select 2- remove span from html – Nour Sammour Feb 26 '16 at 13:28

Nenad Vracar · Accepted Answer · 2016-02-26T13:42:18.670

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>

Excellent, is there any way to display the current rotation of the character? — Kōdo no musō-ka, Feb 26 '16 at 13:38

mr. pc_coder · Answer 3 · 2016-02-26T13:30:03.613

3

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

edited Feb 26 '16 at 13:30

answered Feb 26 '16 at 13:18

mr. pc_coder

16,412
3
32
54

score 1 · Answer 4 · edited May 23 '17 at 12:16

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

HTML button which rotates characters

4 Answers4