javascript - 旋转字符的 HTML 按钮

Question

我想在屏幕上显示一个按钮，在单个字符输入字段旁边。当用户点击按钮时 Angular 色会旋转 1 度，点击它 5 次它会旋转 5 度，按住它它会旋转。

我也希望向用户显示当前的旋转度数(这对于我最后想要构建的内容非常重要)。

目前我有 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);
}

Answer 1

尝试这样的事情

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>