如何使用CSS水平旋转图像 [英] How to spin an image horizontally with CSS

问题描述

我需要水平旋转图片。通常我们使用gifs来显示某些东西正在加载，例如AJAX请求。我发现此示例，但它显示垂直旋转。我想要一个像这一个的动画。

I need to spin an image horizontally. Usually we use gifs to show that something is loading, like an AJAX request for example. I found this example but it shows a vertical rotation. I want an animation like this one.

我如何使用CSS和jQuery？

How can I do this with CSS and jQuery?

推荐答案

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

Researching I've found an answer to my question. We need to use the rotateY attribute for the -webkit-transform CSS property.

.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秒执行完整的旋转。

Additionally, we have to define an animation with a reasonable time. For example I'm going to set the animation to 0.8 seconds. It means that our image are going to perform a complete rotation each 0.8 seconds.

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

I've prepared a jsFiddle showing the complete code width an example: http://jsfiddle.net/AB277/7/

这篇关于如何使用CSS水平旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！