javascript - 寻找(可能是 CSS)涉及移动对象的设计解决方案

Question

我有一个想法，并希望就什么对最佳实现有意义提出一些看法。前提基本上是缓慢移动的物体在外壳内弹跳。像“小行星”游戏一样思考，但没有宇宙飞船(并且与墙壁碰撞而不是穿过)。

因为这是在背景中并且纯粹是为了美观，所以我认为它必须非常轻巧。我会使用所有 CSS，但我的问题是可以将多个动画应用于一个对象吗？说如果我有一个正方形在盒子里弹跳使用

---------
.square {
        animation: moveX 2.05s linear 0s infinite alternate, moveY 2.4s linear 0s infinite

       @keyframes moveX {
         from { left: 0; } to { left: 480px; }
       }

       @keyframes moveY {
         from { top: 0; } to { top: 280px; }
       }
}

如何让它也连续旋转？或者至少创造一些这样做的效果？如果我需要将某些东西与 javascript 放在一起，那很好，只是好奇我是否忽略了 CSS 的某些东西。

Answer 1

您可以在 CSS 中为元素添加旋转:

.square {
  position: relative; /* Ensure it's movable with non static position */
  animation:
    moveX 2.05s linear 0s infinite alternate,
    moveY 2.4s linear 0s infinite,
    rotate 2s linear infinite;
}
@keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@keyframes moveY {
  from { top: 0; } to { top: 280px; }
}
@keyframes rotate {
  0% {transform: rotate(0deg);} 100% {transform: rotate(359deg);}
}

使用-359deg逆时针旋转。