CSS 动画旋转 - 不再原地旋转答案

【问题标题】：CSS Animation Spin - Not Spinning in Place AnymoreCSS 动画旋转 - 不再原地旋转
【发布时间】：2022-01-25 01:07:33
【问题描述】：

我有一张图片，然后我将以下样式规则应用于：

.spinner {
    position: absolute;
    width: 600px;
    height: 600px;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation:spin 14s linear infinite;
    animation:spin 14s linear infinite;
}
@-webkit-keyframes spin { 100% {-webkit-transform: rotate(-360deg);} }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg);}}

在我的 IDE 中，这工作得非常好。大约 6 个月前，我在网上发布了一个页面。我加载了页面，它按预期工作。实际上，这 6 个月里一切都很好，没有任何问题或任何事情。然后几周前我注意到了一个奇怪的发展——旋转行为发生了变化。我很困惑，因为这个页面，事实上，整个网站都是静态的。没有更新主 css 文件或任何可能干扰我上面发布的样式规则的内容。

具体的改变是图像在在其中心位置旋转，现在图像围绕其原始中心位置旋转大约。想象行为变化的最简单方法是将其与时钟进行比较。指针旋转时，时钟的中心不会移动。但是分针和时针可以（即指向时间的指针末端）。这就是我的形象现在正在做的事情。它现在在不应该的情况下跨越像素空间中的 x 和 y 维度。它应该在原地旋转，保持静止。 x 或 y 不应有任何移动。

我对自己说，“这是不可能的”，并认为问题会自行消失，就像它来的时候一样神秘。不幸的是它持续了几个星期，所以我觉得有必要处理它。尽管没有样式规则冲突，但我在上面为.spinner 类以及超出范围的@keyframes 发布的所有样式规则中添加了!important。这没有帮助。

现在我开始认为这可能是浏览器问题？我正在使用谷歌浏览器；只有谷歌浏览器，我没有包含任何-moz，我不需要。我唯一的猜测是浏览器自行更新并开始以不同的方式处理这些动画？

问题：为什么animation:spin 会改变旋转行为？这是其他一些迫在眉睫的问题的症状吗？除了添加!important，我还能做些什么来让我的规则更健壮？

Chrome 版本：64.0.3282.186

更新经过十亿次的反复试验，我发现通过设置：

.spinner {
    -webkit-transform-origin: 15% 0%;
}

图像开始像以前一样在原地旋转。仍然在追问发生了什么……

我检查了图像，看看它的尺寸是否发生了某种变化，但看起来很正常。

【问题讨论】：

你为什么不使用无前缀的 transform-origin？
@jhpratt 好电话，我刚才也试过了。这很奇怪，仍然无法正常工作。感谢您调查它
"长度：600px" ?
哈哈，打错字了，改成高度
您能否通过例如 rotateX 或 rotateY 来强制您的旋转在所需的轴上？这应该适用于所有浏览器。

标签： html css google-chrome

【解决方案1】：

2021.5 有点晚了但可能对某人有帮助。就我而言，这是因为我删除了：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

然后抓住了那个。以下所有内容均未触及，css为：

#overlay {
 display: none;
 align-items: center;
 justify-content: center;
 height: 100%;
 width: 100%;
 position: absolute;
 z-index: 99999;
}

.myblock {
 display: inline-block;
 vertical-align: center;
 horiz-align: center;
 -webkit-animation: spin 4s linear infinite;
 -moz-animation: spin 4s linear infinite;
 animation: spin 4s linear infinite;
 transform-origin: center center;
 -moz-transform-origin: center;
 width: auto;
 height: auto;
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

html:

<body>
<div id="overlay">
  <div class="myblock" style="background-color: transparent; background-blend-mode: unset">
    <img src="/images/corona.png" width="150px" height="150px" style="background-blend-mode: unset"
         alt="this slowpoke moves"/>
 </div>
</div>

....//other divs
 </div>
</body>

js部分：

function spinIt(gironPrm) {
    if (gironPrm === true)
        $("#overlay").css('display', 'flex')
    else
        $("#overlay").css('display', 'none')
}

我不知道不关心它的科学，也没有时间弄清楚它为什么会发生在我身上，但它就是这样

【讨论】：