Html 平滑旋转过渡CSS3？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24071548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Smooth rotation transition CSS3?
提问by 2339870
I am rotating my images when hovered and I want the transition to be smooth so this is what I tried:
我在悬停时旋转我的图像，我希望过渡平滑，所以这就是我尝试的：
<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:
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%;
}
My images rotate when hovered, so there is no problem there, only, the transition is not smooth. Any ideas on how to fix this?
我的图像在悬停时旋转，所以那里没有问题，只是过渡不平滑。有想法该怎么解决这个吗？
JSFiddle: http://jsfiddle.net/wntX4/
JSFiddle：http: //jsfiddle.net/wntX4/
回答by faby
回答by Dykotomee
Try using transform: translate(and of course browser-specific prefixes). This articleis pretty helpful.
尝试使用transform: translate（当然还有浏览器特定的前缀）。这篇文章很有帮助。
回答by DusanV
I have just changed this in your fiddle and it works:
我刚刚在你的小提琴中改变了这个，它有效：
.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;
}
I think that browser was firing 2 hovers at once. It's 1 year old but someong might fail into this again.
我认为浏览器一次触发了 2 次悬停。它已经 1 岁了，但有人可能会再次失败。
