Rotate an image with css/javascript [duplicate]

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) codepen.io/gc-nomade/pen/VBRzdP (no javascript being harmed here ;) ) — G-Cyrillus
– G-Cyrillus, Commented Aug 13, 2018 at 8:26
I need to get the element rotation degrees, cause if i apply this for more than one image... It wont work good. — Jackjoss
– Jackjoss, Commented Aug 15, 2018 at 22:03
@Jackjoss: I have modified Anuga's answer for multiple images stackoverflow.com/a/51879318/9938317 — rioV8
– rioV8, Commented Aug 16, 2018 at 14:22

Abin Thaha Azees · Accepted Answer · 2018-08-13 07:30:20Z

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, 2018 at 7:30

Abin Thaha Azees

4,7733 gold badges16 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anuga Over a year ago

Why add jQuery? not necessary.

Abin Thaha Azees Over a year ago

Added jQuery so that I can use like $("#rotater"). It's possible without using jQuery as well.

Anuga Over a year ago

Yea, one really don't need to get the element by the ID in this case.

Anuga · Accepted Answer · 2018-08-13 08:02:38Z

0

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

answered Aug 13, 2018 at 8:02

Anuga

2,8271 gold badge22 silver badges30 bronze badges

Comments

Arjun Choudhary · Accepted Answer · 2018-08-13 09:06:08Z

-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, 2018 at 9:06

answered Aug 13, 2018 at 7:24

Arjun Choudhary

2033 silver badges16 bronze badges

2 Comments

Abin Thaha Azees Over a year ago

This will work only one time. I guess @Jackjoss wants to rotate the image 180 everytime he clicks it.

Anuga Over a year ago

Why add jQuery? not necessary.

Collectives™ on Stack Overflow

Rotate an image with css/javascript [duplicate]

3 Answers 3

3 Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Linked

Related