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;

参考this

<强>更新

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

Answer 2

尝试使用transform: translate（当然还有浏览器特定的前缀）。 This article非常有帮助。

Answer 3

我刚刚在你的小提琴中改变了它，它起作用了：

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

我认为浏览器一下子就开了两个徘徊。它已经1岁了但是有些人可能会再次陷入困境。

平滑旋转过渡CSS3？

3 个答案: