如何使用 CSS 水平旋转图像答案

【问题标题】：How to spin an image horizontally with CSS如何使用 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！