Question

我一直试图找到如何让图像在第一次点击时向右旋转90度，再次点击时，返回到它的原始方向。我正在查看另一个人在堆栈溢出时提出的这个问题，但this没有包含再次点击图像时向后旋转的图像。

到目前为止，CSS已显示出潜力，但我似乎无法在第二次点击时将图像旋转回来。

如果您需要参考，这是图像： image

这是我的剧本：

<html>
    <head>
        <style>
            .rotate {
               -ms-transform: rotate(90deg);
                -webkit-transform: rotate(90deg);
                 transform: rotate(90deg);
            }

            .normal {
               -ms-transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                 transform: rotate(0deg);
            }
        </style>

        <script>
        function Rotate() {
            var rotate = 0
            var rotate = rotate + 1

            if (rotate = 2) {
                document.getElementbyID(image).className = 'normal';
            }
            else if (rotate <= 3) {
                var rotate = 0
                location.reload();
            }
            else {
                document.getElementbyID(image).className = 'rotate';
            }
        }
        </script>


    </head>
    <body>
        <img src="http://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image"/>

    </body>
</html>

Answer 1

您的脚本首先出现了很多错误：您在脚本的许多部分重新启动了旋转，第二个：如果您必须与==而不是=进行比较，则最后一个是分配值，第三：getElementById不是getElementbyID

尝试使用此脚本：

<script>
    var rotate = false;

    function Rotate() {

        if (rotate == true) {
            document.getElementById('image').className = 'normal';
            rotate = false;
        }
        else {
            document.getElementById('image').className = 'rotate';
            rotate = true;
        }
    }
</script>

Answer 2

以下是运行您要尝试实现的内容的代码段：

＆＃13;

function Rotate() {
		var element = document.getElementById('image');

		if (element.className === "normal") {
			element.className = "rotate";
		}
		else if ( element.className === "rotate") {
			element.className = 'normal';
		}
	}

＆＃13;

.rotate {
   -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
}

.normal {
   -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
}

＆＃13;

<html>
<head>
</head>
<body>

<img src="http://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image"/>

</body>
</html>

＆＃13;

请记住，您的代码中存在多个语法错误，例如：document.getElementById（）并使用单个=进行比较。

您可以检查浏览器控制台以查看类似的错误。

Answer 3

除了Jose Rojas提出的建议外，我还找到了一种通过修改本网站建议页面上的某些脚本来重置方向的方法。您可以查看here。我将为每个其他角度修改CSS脚本，因此该过程可以永久持续。

使用javascript旋转和取消旋转图像onClick

3 个答案: