如何在按钮单击事件中将图像旋转到下一个角度？

Question

我正在玩 jquery.rotate.js 我想每次都将图像旋转到下一个旋转度数。

我包含了以下 jquery 个库：

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript' src='jquery.rotate.1-1.js'></script>

jQuery代码：

$(window).load(function() {
    $("body").on("click", "#button", function() {
        $(".north").rotate(a());
    });
    nextAngle = 0;
    function a() {
        nextAngle += 90;
        if (nextAngle >= 360) nextAngle = 0;
        return nextAngle;
    }
});

HTML代码：

<img class="north" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSGPgQ8k88yaWVPRytT957hKLV-89QmZtkZc44q45TEDdqe9sKwqg">
<input type="button" id="button" value="Rotate me">

我的 JSFiddle：Sample

在我当前的代码中，图像只旋转一次，但我想在每次按钮单击事件时重新旋转图像。 jQuery.rotate.js 怎么可能？

我想要像这样序列的图像旋转：

有什么想法吗？

谢谢。

Answer 1

在 Jquery 中进行如下更改将适用于您的：

$("body").on("click", "#button", function () {
    $(".north, canvas").rotate(getNextAngle());
});

因为点击旋转你的图像被转换为 canvas。

勾选Fiddle

编辑：

如下更改 JQuery 以获得您在问题图片中提到的所需输出。

$("body").on("click", "#button", function () {
    $(".north, canvas").rotate(90);
});

Updated Fiddle

如何在按钮单击事件中将图像旋转到下一个角度？

How to rotate image to its next degree on button click event?

jquery

html

css

rotation

transform

我想要像这样序列的图像旋转：