平滑的旋转过渡 CSS3？答案

【问题标题】：Smooth rotation transition CSS3?平滑的旋转过渡 CSS3？
【发布时间】：2014-07-27 02:48:23
【问题描述】：

我在悬停时旋转我的图像，我希望过渡平滑，所以这是我尝试的：

<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 css transition smooth

【解决方案1】：

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

【讨论】：

【解决方案2】：

更改所有过渡 css 属性（用线性替换轻松）

transition: 300ms ease all;

与

transition: 300ms linear all;

参考this

更新

您的过渡仅适用于以正确方式工作的 opacity 属性

【讨论】：

试过这个，但它没有改变任何东西。 :(
你试过不同的值吗？缓入，缓出..你能发布一个错误的小提琴吗？
那你需要解释一下你所说的“不流畅”是什么意思
我的意思是“过渡：300ms 线性全部；”部分似乎根本不起作用。我会试着做一个小提琴。
您的过渡仅适用于以正确方式工作的 opacity 属性

【解决方案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;
        }

我认为浏览器会同时触发 2 次悬停。它已经 1 岁了，但有些人可能会再次失败。

【讨论】：