Javascript 旋转字符的HTML按钮

我想有一个按钮显示在屏幕上，旁边的一个字符输入字段。当用户单击按钮时，角色将旋转1度，单击5次，然后旋转5度，按住按钮，然后旋转

我还希望向用户显示当前的旋转度（这对于我最终要构建的内容非常重要）

目前我有HTML：

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

---

您需要在单击时指定TransformCSS属性

---

要显示当前角度/度数，可以显示

角度

变量

尝试以下操作

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

var计数=0；
var目标=$（'h2'）；
$（'button'）.mousedown（函数（）{
目标=设置间隔（函数（）{
计数++；
$（'h2'）.css（'transform'，'rotate（'count+'deg'））；
$（'p'）.text（'Rotated'+count+'deg'）；
}, 100);
返回false；
});
$（文档）.mouseup（函数（）{
清除间隔（目标）；
返回false；
});
按钮{
显示：块；
}
p{
保证金：0；
}
氢{
显示：内联块；
变换原点：中心；
字体大小：50px；
边缘顶部：10px；
}

旋转
旋转0度

P
结合Nour的解决方案（只听onClick）和我创建的小提琴的答案：
您是否尝试过使用javascript？但是，非常好；我如何让它为多个角色工作？a b cyou可以删除span并对按钮本身应用旋转，因此1-删除。从选择2-从htmlExcellent删除span中查找（'span'），是否有任何方法显示角色的当前旋转？
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;
});

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

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

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