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

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.
Footerproblemscreenshots1.png
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.
ProblemFooterScreenShot.png
Conrado ZAVALAAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kyle HamiltonData ScientistCommented:
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:

.arrowUp{
-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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Kyle HamiltonData ScientistCommented:
btw, get rid of the filter. there are no phones with old IE.
0
Conrado ZAVALAAuthor Commented:
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.
0
Conrado ZAVALAAuthor Commented:
I already fix the problem Kyle. Thank you very much for your help.

Best Regards.
0
Kyle HamiltonData ScientistCommented:
:)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.