如何使用 CSS 水平旋转图像

Posted 2023-03-06

【中文标题】如何使用 CSS 水平旋转图像

【英文标题】：How to spin an image horizontally with CSS

【发布时间】：2013-12-11 15:25:40

【问题描述】：

我需要水平旋转图像。通常我们使用 gif 来显示正在加载的内容，例如 AJAX 请求。我找到了this example，但它显示了垂直旋转。我想要一个像this one 这样的动画。

如何使用 CSS 和 jQuery 做到这一点？

【参考方案1】：

研究我找到了我的问题的答案。我们需要为-webkit-transform CSS 属性使用rotateY 属性。

.imageRotateHorizontal
    -moz-animation: spinHorizontal .8s infinite linear;
    -o-animation: spinHorizontal .8s infinite linear;    
    -webkit-animation: spinHorizontal .8s infinite linear;
    animation: spinHorizontal .8s infinite linear;


@keyframes spinHorizontal 
    0%  transform: rotateY(0deg); 
    100%  transform: rotateY(360deg); 


/* Vendor specific keyframes go here */

此外，我们必须定义一个具有合理时间的动画。例如，我将动画设置为 0.8 秒。这意味着我们的图像将每 0.8 秒执行一次完整的旋转。

我准备了一个显示完整代码宽度的 jsFiddle 示例：http://jsfiddle.net/AB277/7/

【讨论】：

-webkit-transform 在-moz-keyframes 内？看起来你不完全明白你在做什么。标准属性在哪里？

你是对的，@Pavlo。在一个匆忙的早晨，这是一个错误的复制和粘贴。很抱歉，感谢您的 cmets。

感谢@PabloAnaya 发布此答案并提供 jsfiddle！