添加水平旋转的预加载器答案

【问题标题】：Add Preloader which is horizontally spinning添加水平旋转的预加载器
【发布时间】：2021-07-14 23:26:47
【问题描述】：

我目前正在开发一个可以水平旋转图像的预加载器。

我发现了各种线程和想法，基本上都包含类似的内容：

 <style>
      .imageRotateHorizontal{
    -moz-animation: spinHorizontal 3s infinite linear;
    -o-animation: spinHorizontal 3s infinite linear;
    -webkit-animation: spinHorizontal 3s infinite linear;
    animation: spinHorizontal 3s infinite linear;
}


@keyframes spinHorizontal {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(359deg);
  }
}
  </style>

我的问题是，图像就像在中途旋转一样，正如您在我创建的小提琴中看到的那样：https://jsfiddle.net/1hw3xamj/

所以基本上，图像会转动直到镜像，然后再转回来......

不过，我的目标是让它在一个方向上永久旋转，而不是在镜像时转动...

我希望你明白我的意思。

【问题讨论】：

标签： html css animation

【解决方案1】：

图像正在旋转 360 度。很难说，因为您使用的图像是对称的。

我已将图片更改为另一张图片，因此您可以看到它在旋转：https://jsfiddle.net/1hw3xamj/

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Flat_tick_icon.svg/1200px-Flat_tick_icon.svg.png" class="rotate" width="200" height="200" />

【讨论】：

哦，好吧，你是对的......有没有什么办法可以让这个东西更深入，所以很明显，它在旋转？
以编程方式我不确定。我能看到的最简单的方法就是让图像有点不对称。