Question

今天我想创建一个不同的按钮...所以我想：如果我得到的图像在单击时旋转180度，然后一次又一次旋转180度...（每次单击）。经过大量尝试，我不知道该怎么办。这就是我的想法和所作：

HTML：

func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int { print(dropDwonArray.count) return dropDwonArray.count } func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? { print(dropDwonArray[row]) return dropDwonArray[row] }

CSS：

<img id="rotater" onclick="rotate()" src="anyImage.png"/>

Javascript：

img{border: 0.0625em solid black;border-radius: 3.75em;}
#rotate{ animation: rotation 3s 0.5 forwards;}
@keyframes rotation{50% {transform: rotate(180deg);}}

这并不重要，只是一个主意...

Answer 1

尝试一下

使用此代码，每次单击图像时，图像都会旋转180度

let rotateAngle = 180;
function rotate() {
  $("#rotater").css({'transform': 'rotate('+rotateAngle+'deg)'});
  rotateAngle = rotateAngle + 180;
}

#rotater {
  transition: all 0.3s ease;
  border: 0.0625em solid black;
  border-radius: 3.75em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="rotater" onclick="rotate()" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>

Answer 2

@Abinthaha发布的内容，但纯JS，无需jQuery。

let rotateAngle = 180;

function rotate(image) {
  image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
  rotateAngle = rotateAngle + 180;
}

#rotater {
  transition: all 0.3s ease;
  border: 0.0625em solid black;
  border-radius: 3.75em;
}

<img id="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>

Answer 3

要使用jquery将图像旋转180度，请使用此 `

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img id="rotater" onclick="rotate();"  src="anyImage.png"/>
</body>
<script type="text/javascript">
    let rotateAngle = 180;
    function rotate(){
        $("#rotater").css({'transform': 'rotate('+rotateAngle+'deg)'});
        rotateAngle = rotateAngle + 180;
    }
</script>
</html>

`

使用CSS / JAVScript旋转图像

3 个答案: