[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


How to rotate an image 180 degrees on every click with css?

Posted on 2014-08-18
Medium Priority
Last Modified: 2014-08-18
Dear Experts,

I'm using jquery mobile to do an app, and I'm using an image to toggle the footer of my app.
The thing is that I need to animate with a rotate the image (that is a chevron arrow pointing to the top) and I want that when the user makes a tap on the image, the image will rotate 180 degrees.

My app is here: Symbiont Technologies

1. Sign In
2. Click on the blue image that has the numbers 1234.
Footerproblemscreenshots.png3. Then you click on the chevron image that is on the bottom right of the page.
That chevron image toggles the footer, but the image is static.
There's where I want to rotate that image with css on every click of the user.

Thanks in Advance.

Best Regards.
Question by:Conrado ZAVALA
  • 3
  • 2
LVL 25

Accepted Solution

Kyle Hamilton earned 2000 total points
ID: 40268567
instead of hiding and showing different images, toggle a class on click.

add a transition to #imgFooter rule:

#imgFooter {
height: 40px;
width: 40px;
position: fixed;
bottom: 30px;
right: 5px;
opacity: 0.90;
filter: alpha(opacity=90);
z-index: 20;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;

Open in new window

make a new class:

-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);

Open in new window

toggle the arrowUp class on click.
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40268573
btw, get rid of the filter. there are no phones with old IE.

Author Comment

by:Conrado ZAVALA
ID: 40268741
Hi Kyle, I've made the changes you invite me to do, but now I'm coming with this new problem.

It is in the same URL.

1. Sign In
2. Click on the blue image that has the 3 little men.
Footernewproblem.png--* You click on the chevron image and it works pretty nice, but when you go to the other page it stops making the rotate.
3. click on the next page.
Footernewproblem2.png--* When you click on the chevron it doesn't work.

Do you know what's happening?

Thank you for your help.

Best Regards.

Author Comment

by:Conrado ZAVALA
ID: 40268754
I already fix the problem Kyle. Thank you very much for your help.

Best Regards.
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40268785

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question