Html 平滑旋转过渡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 -->

我的图像在悬停时会旋转，因此没有问题，只是过渡不平滑。有没有办法解决这个问题

---

jsidle:

尝试使用

transform:translate

（当然还有特定于浏览器的前缀）。非常有帮助。

更改所有的转换css属性（将ease替换为linear）

与

提及

更新

---

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

我刚刚在您的小提琴中更改了此选项，它可以工作：

.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年，但有些人可能会再次失败。

尝试过这个，但没有改变任何事情：（你尝试过不同的值吗？放松，放松..你能发布一个关于错误的提琴吗？然后你需要解释你所说的“不平滑”是什么意思，我的意思是“过渡：300ms线性全部”；部分似乎根本不起作用。我将尝试制作一个提琴。你的过渡只适用于以正确方式工作的不透明属性

transition: 300ms ease all;

transition: 300ms linear all;

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