How To Click Flip An Image Using Only CSS and jquery.

Hey guys! Been a while but I wanted to share a quick tip I use on another website of mine to easily allow visitors to click an image and flip it horizontally. There are tons of reasons why someone might want to do this, and you’d probably think it is complicated to do. However, it’s actually a very easy method using only css code.

In your css, you’ll want a class called “flipped”, which contains the following code:

.flipped {
transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
}

Next, for any image you want users to have the ability to “click-flip” you’ll want to add the following to the image tag:

onclick=”$(this).toggleClass(‘flipped’);”

Here it is in action (click the image!):

Hope you guys find this useful! (if it doesn’t work here, that’s because my wordpress installation is having trouble importing jquery!)