How to make images flip rotate using CSS

Question

I am trying to make images flip using CSS3.

Here is an example using JS but I need a straight CSS solution

Answer 1

You can try this:

img{
    -webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
            transition: all 1s;
}
img:hover{
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
        -ms-transform: rotate(270deg); /* IE 9 */
            transform: rotate(270deg);
}

---

You edited your question, from what I understand, then this is the best solution:

Example: http://embed.plnkr.co/ZaPfSa4Od9lfC9idwDGW/preview

img{
    -webkit-transition: all .5s; /* For Safari 3.1 to 6.0 */
    transition: all .5s;
}
img:hover{
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);

    filter: FlipH;
    -ms-filter: 'FlipH';
}

Answer 2

a more complete vendor prefixed version:

-webkit-transition: -webkit-transform 1s;
-moz-transition:    -moz-transform 1s;
-o-transition:      -o-transform 1s;
-ms-transition:     -ms-transform 1s;
transition:         transform 1s;