Smooth rotation transition CSS3?

Question

I am rotating my images when hovered and I want the transition to be smooth so this is what I tried:

<div class="latest-thumbs">
    <img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" />
    <img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" />
    <img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" />
</div><!-- end latest-thumbs -->

CSS:

.rotate {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webkit-transition: 300ms ease all;
    -moz-transition: 300ms ease all;
    -o-transition: 300ms ease all;
    transition: 300ms ease all;
}

.rotate:hover {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

My images rotate when hovered, so there is no problem there, only, the transition is not smooth. Any ideas on how to fix this?

JSFiddle: http://jsfiddle.net/wntX4/

Solution

change all your transition css property (replace ease with linear)

transition: 300ms ease all;

with

transition: 300ms linear all;

refer this

Update

your transition is only for opacity property that is working in the right way

Comments

[2339870]

Tried this but it's not changing anything. :(

[faby]

have you tried with different values? ease-in,ease-out.. can you post a fiddle with the error?

[Paulie_D]

Then you need to explain what you mean by "not smooth"

[2339870]

I mean the "transition: 300ms linear all;" part doesn't seem to work at all. I'll try making a fiddle.

[faby]

your transition is only for opacity property that is working in the right way

[faby]

I'll update my answer, remembar to accept the answer that you choose as best to mark your question as answered.