使用jQuery和CSS单击按钮后旋转div文本

小编典典

使用jQuery和CSS单击按钮后旋转div文本

css

我想使用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>

阅读 435

2020-05-16

共1个答案

小编典典

尝试这个：

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

2020-05-16