Плавный переход вращения CSS3?

Я вращаю свои изображения при наведении курсора и хочу, чтобы переход был плавным, поэтому я пробовал следующее:

<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%;
}

Мои изображения вращаются при наведении, так что проблем нет, только переход не плавный. Есть какие нибудь идеи как это починить?

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


html transition css smooth
person 2339870    schedule 05.06.2014    source источник

Ответы (3)


arrow_upward
17
arrow_downward

измените все свойства перехода css (замените легкость на линейную)

transition: 300ms ease all;

с участием

transition: 300ms linear all;

см. это

Обновить

ваш переход предназначен только для свойства непрозрачности, которое работает правильно

person faby    schedule 05.06.2014
comment
Пробовал это, но это ничего не меняет. :( - person 2339870; 06.06.2014
comment
пробовали с разными значениями? облегчение, облегчение... можете ли вы опубликовать скрипку с ошибкой? - person faby; 06.06.2014
comment
Тогда вам нужно объяснить, что вы подразумеваете под не гладким - person Paulie_D; 06.06.2014
comment
Я имею ввиду переход: 300мс линейный все; часть вообще не работает. Я попробую сделать скрипку. - person 2339870; 06.06.2014
comment
ваш переход предназначен только для свойства непрозрачности, которое работает правильно - person faby; 06.06.2014
comment
Спасибо, это исправлено! - person 2339870; 06.06.2014
comment
Я обновлю свой ответ, не забудьте принять ответ, который вы выбрали как лучший, чтобы пометить свой вопрос как отвеченный. - person faby; 06.06.2014

arrow_upward
0
arrow_downward

Попробуйте использовать transform: translate (и, конечно же, префиксы для конкретных браузеров). Эта статья очень полезна.

person Dykotomee    schedule 05.06.2014

arrow_upward
0
arrow_downward

Я только что изменил это в вашей скрипке, и она работает:

.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;
        }

Я думаю, что браузер запускал 2 ховера одновременно. Это 1 год, но кто-то может потерпеть неудачу в этом снова.

person DusanV    schedule 21.06.2015