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/

faby · Accepted Answer · 2014-06-05T23:21:52.980

18

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

edited Jun 05 '14 at 23:21

answered Jun 05 '14 at 22:59

faby

7,394
3
27
44

Tried this but it's not changing anything. :( – 2339870 Jun 05 '14 at 23:03
have you tried with different values? ease-in,ease-out.. can you post a fiddle with the error? – faby Jun 05 '14 at 23:08
1

Then you need to explain what you mean by "not smooth" – Paulie_D Jun 05 '14 at 23:08
I mean the "transition: 300ms linear all;" part doesn't seem to work at all. I'll try making a fiddle. – 2339870 Jun 05 '14 at 23:09
1

your transition is only for opacity property that is working in the right way – faby Jun 05 '14 at 23:15
I'll update my answer, remembar to accept the answer that you choose as best to mark your question as answered. – faby Jun 05 '14 at 23:21

score 0 · Answer 2 · answered Jun 05 '14 at 22:59

0

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

answered Jun 05 '14 at 22:59

Dykotomee

728
6
20

score 0 · Answer 3 · answered Jun 21 '15 at 06:43

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.

Smooth rotation transition CSS3?

3 Answers3