平滑旋转过渡CSS3？

Question

我在悬停时旋转我的图像,我希望过渡顺利,所以这就是我尝试过的:

<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/

Answer 1

更改所有转换css属性(用线性替换easy)

transition: 300ms ease all;

同

transition: 300ms linear all;

参考这个

更新

您的转换仅适用于以正确方式工作的不透明度属性