Question

我有2个div .. div1和div2。点击开始旋转。可以随时单击它们。当我单击div1时，它开始旋转；当我单击div2时，它开始旋转-太好了。

问题是，无论何时单击它们，我都希望它们一起旋转-也就是说，我希望它们在旋转时始终以相同的角度旋转。

例如，如果单击div2时div1位于45度-div2应跳至45度旋转并开始旋转。

有什么方法可以仅在CSS中执行此操作，还是需要JS？

当前旋转CSS：

&.active {
  background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
  animation: spin 1s linear infinite;
}

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

活动类应用于div onClick（使用Angular框架）。

谢谢

Answer 1

您正在寻找的旋转“跳跃”看起来不会很好。但是，回答您的主要问题：否，您无法在CSS中获得该信息。

我看到两种解决方案：

由于您将要在旋转开始之前进行不带动画的旋转，因此您始终可以重新启动第一个div旋转并再次启动它，因此两者将被同步。
如果您真的希望第二个div与第一个div同步，则好消息是您已经在使用Angular，因此可以计算div1的旋转角度，将其应用于div2并开始旋转。

CSS动画旋转-如何使2个元素一致旋转？

1 个答案: