我需要水平旋转图像。通常,我们使用gif来显示正在加载的内容,例如AJAX请求。我找到了this example,但它显示了垂直旋转。我想要像this one这样的动画。
我该如何使用CSS和jQuery?
最佳答案
经过研究,我找到了问题的答案。我们需要将rotateY
属性用于-webkit-transform
CSS属性。
.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/