Smooth rotation transition CSS3?

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/

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

CSS Transitions and Transforms for Beginners, Transitions are the grease in the wheel of CSS transforms. Without a transition, an element being transformed would change abruptly from one state to another. By applying a transition you can control the change, making it smooth and gradual. CSS Transitions. CSS transitions allows you to change property values smoothly, over a given duration. Mouse over the element below to see a CSS transition effect:

Try using transform: translate (and of course browser-specific prefixes). This article is pretty helpful.

Use the transform CSS property to ensure smooth animations , Start with each box rotated negative 360deg/1turn and, upon triggering the transition with the button, rotate back to 0deg/0turn over the course of one half of a second using the ease-in-out timing function. The end result is the exact same, and using degrees or turns comes entirely down to personal preference. CSS3 Transitions with rotation - To: CSS3 - Information and samples. Hover any of the menu items below to see a CSS Transition in action when the item with the current focus rotates.

I have just changed this in your fiddle and it works:

.rotate:hover {
            transform: rotate(0deg) translate(50%);
            -moz-transform: rotate(0deg) translate(50%);
            -webkit-transform: rotate(0deg) translate(50%);
            -o-transform: rotate(0deg) translate(50%);
            -ms-transform: rotate(0deg) translate(50%);
            -khtml-transform: rotate(0deg) translate(50%);
            transition: all 2s ease;
            -moz-transition: all 2s ease;
            -webkit-transition: all 2s ease;
            -o-transition: all 2s ease;
            -ms-transition: all 2s ease;
            -khtml-transition: all 2s ease;
        }

I think that browser was firing 2 hovers at once. It's 1 year old but someong might fail into this again.

CSS transition rotate, Analyze HTML; Maximize HTML Editor; Minimize HTML Editor; Fold All; Unfold All. xxxxxxxxxx. 3. 1. <body>. 2. <a href="#"><div class="css-square"></div></a>. Transitions are the grease in the wheel of CSS transforms. Without a transition, an element being transformed would change abruptly from one state to another. By applying a transition you can control the change, making it smooth and gradual.

Reversing CSS Rotation Smoothly on Hover, In order to accomplish this goal a container element is required. The trick is to have the same rotation animations apply to both the container and the CSS transitions and transforms are a powerful way to enhance and delight user experiences. No added library like GSAP or Velocity.js are necessary. Neither is JavaScript required. CSS3 animations…

CSS3 Transitions with rotation, CSS3 Transitions with rotation - To: CSS3 - Information and samples. Hover any of the menu items below to see a CSS Transition in action when the item with the � Transition on Hover. CSS transitions allows you to change property values smoothly (from one value to another), over a given duration. Add a transition effect (opacity and background color) to a button on hover:

rotation transition css Code Example, Get code examples like "rotation transition css" instantly right from your CSS transitions allows you to change property values smoothly, over a given duration. Introduced a few years ago with the CSS3 specification, transitions are a set of properties that allows front-end developers to smoothly change the values of a specific CSS property over a given time.

Comments
  • Tried this but it's not changing anything. :(
  • have you tried with different values? ease-in,ease-out.. can you post a fiddle with the error?
  • Then you need to explain what you mean by "not smooth"
  • I mean the "transition: 300ms linear all;" part doesn't seem to work at all. I'll try making a fiddle.
  • your transition is only for opacity property that is working in the right way