CODEWITHSUNDEEP
htmlcsstransitionsmoothing
2339870
2339870

Reputation: 1487

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/

Upvotes: 10

Views: 42322

Answers (3)

DusanV
DusanV

Reputation: 491

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.

Upvotes: 1

faby
faby

Reputation: 7556

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

Upvotes: 19

Dykotomee
Dykotomee

Reputation: 772

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

Upvotes: 0

Related Questions