Question

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

如何使用CSS和jQuery执行此操作？

Answer 1

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

.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/

如何使用CSS水平旋转图像

1 个答案: