Rotate an image with css/javascript

Question

Today I thought about creating a different button... So I thought: if I get an image that rotates 180 degrees when I click it and rotates more 180 degrees again and again again... (every time I click). After lots of tries, I don't know how can I do it. This was what I thought and made:

HTML:

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

CSS:

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

JavaScript:

function rotate(){x=document.getElementById('rotater');x.id = 'rotate';}

It's not important, just an idea...

for the fun and via attribute `tabindex` and CSS (`:focus/pointer-events`) https://codepen.io/gc-nomade/pen/VBRzdP (no javascript being harmed here ;) ) — G-Cyrillus, Aug 13 '18 at 08:26
I need to get the element rotation degrees, cause if i apply this for more than one image... It wont work good. — Jackjoss, Aug 15 '18 at 22:03
@Jackjoss: I have modified Anuga's answer for multiple images https://stackoverflow.com/a/51879318/9938317 — rioV8, Aug 16 '18 at 14:22

score 2 · Answer 1 · answered Aug 13 '18 at 07:30

2

Try this

With this code, your image will rotate 180deg each, everytime you click the image

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"/>

answered Aug 13 '18 at 07:30

Abin Thaha

4,493
3
13
41

Why add jQuery? not necessary. – Anuga Aug 13 '18 at 07:47
Added `jQuery` so that I can use like `$("#rotater")`. It's possible without using jQuery as well. – Abin Thaha Aug 13 '18 at 08:07
Yea, one really don't need to get the element by the ID in this case. – Anuga Aug 13 '18 at 08:08

score 0 · Answer 2 · answered Aug 13 '18 at 08:02

Kind of what @Abinthaha posted, but pure JS, without the need of 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"/>

Arjun Choudhary · Answer 3 · 2018-08-13T09:06:08.743

-1

For rotating image by 180 degree using jquery use this `

<!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>

`

edited Aug 13 '18 at 09:06

answered Aug 13 '18 at 07:24

Arjun Choudhary

203
3
16

This will work only one time. I guess @Jackjoss wants to rotate the image 180 everytime he clicks it. – Abin Thaha Aug 13 '18 at 07:32
Why add jQuery? not necessary. – Anuga Aug 13 '18 at 07:47

Rotate an image with css/javascript

3 Answers3