style.transform = "rotate()"不止一次？

Question

我有一个 svg 图像，当我点击一个复选框时它会旋转 360 度。我使用 style.transform。但是当我取消选中时，它不会再这样做了。

有没有什么办法让它在不刷新的情况下旋转不止一次？

我试过在 "else"

中包含相同的功能

<input type="checkbox" id="myCheck"  onclick="myFunction()">
<label for="myCheck"><img src="logo.svg" id="svg1"></label>

<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  if (checkBox.checked == true){
    document.getElementById("svg1").style.transform = "rotate(360deg)";
  }else{
    document.getElementById("svg1").style.transform = "rotate(360deg)";
  }
}
</script>

目前只旋转一次。当我再次点击时它不会再次执行。

Answer 1

嗯。为什么你的其他人也有 360 度？如果我是对的，你应该说

if(input.checked) document.getElementById("svg1").style.transform = "rotate(360deg)";
else document.getElementById("svg1").style.transform = "rotate(0)";

Answer 2

如果我错了请纠正我。所以您想将 SVG 元素旋转 360 度？所以基本上，如果你旋转一个元素 360 度，你不会看到任何差异，因为它是一个完整的旋转。当然，变换不会对你的旋转求和。

如果需要，您可以添加转换。

<input type="checkbox" id="myCheck"  onclick="myFunction()">
svg
<label for="myCheck"><img src="logo.svg" id="svg1"></label>


<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  document.getElementById("svg1").style.transition = "all 300ms ease-in"; 
  if (checkBox.checked == true){
    document.getElementById("svg1").style.transform = "rotate(360deg)";
  }else{
    document.getElementById("svg1").style.transform = "rotate(0deg)";
  }
}
</script>

style.transform = "rotate()"不止一次？

style.transform = "rotate()" more than once?

javascript

image-rotation