用于旋转字符的HTML按钮

Question

我想在屏幕上显示一个按钮,旁边是单个字符输入字段.当用户点击按钮时,角色将旋转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

你需要在点击时指定transform css属性

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

显示当前角度/度数,您可以显示angle变量

Answer 2

尝试这样的事情

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>