javascript - 使用 jquery 和 css 单击按钮后旋转 div 文本

Question

我想在使用 jquery 和 css 单击按钮后旋转 div 文本

如果用户点击 Rotate Left 按钮然后文本在左侧旋转
或者
用户点击 Rotate Right 按钮然后文本在右侧旋转

示例:

<div id="RotateDiv">Happy Birthday</div>

<button id="btnRotateLeft" type="button">Rotate Left</button>
<button id="btnRotateRight" type="button">Rotate Right</button>

Answer 1

试试这个:

演示:http://jsfiddle.net/ehec1gun/

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
};

$('#btnRotateRight').click(function() {
    rotation += 5;
    $('.rotate').rotate(rotation);
});

$('#btnRotateLeft').click(function() {
    rotation -= 5;
    $('.rotate').rotate(rotation);
});