无法在自定义 Angular 元素上进行旋转

Question

我使用了以下 CSS 来自 here.

:host {
  animation: rotation 2s infinite linear;
  border: 10px solid yellow;
}

@keyframes rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

虽然我可以看到边框，但我没有看到任何旋转，所以我知道我瞄准了正确的元素。我不认为它需要有一个 IMG（我的是 Angular 中的自定义东西）。它适用于 IMG，也适用于 DIV。不确定如何进一步诊断它，因为 rotations/animations 不是我最强大的套件。

一种方法是将自定义组件放在 DIV 中并旋转它。但是，它确实围绕屏幕中间旋转（wiiiide 圆圈）而不是围绕自身旋转。

<div id="loading">
  <my-icon-globe></my-icon-globe>
</div>

#loading { animation: rotation 2s infinite linear; }

@keyframes rotation {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(359deg); }
}

Answer 1

如果您尝试第二种方法，您可以调整 DIV 的 transform-origin。

无法在自定义 Angular 元素上进行旋转

Can't get rotation on a custom Angular element

html

css

animation

rotation