👨‍💻 사건

• 부모요소에 transform-origin 을 통해 중심축을 다른 곳으로 옮긴 후, 스핀 애니메이션을 부여하고, 자식에도 부모와 같은 중심축 이동 + 스핀 애니메이션을 부여하니, 소라게 모양으로 스핀하였다.

<div class="relative h-screen flex justify-center items-center w-full animate-spin">
  <div class="origin-[0px_520px] absolute flex flex-col box-border w-96 h-96 bg-gradient-to-tr from-violet-500 to-slate-300 rounded-full justify-center items-center shadow shadow-lg shadow-[0_0_56px_32px_rgba(173,0,255,0.25)] animate-spin z-50">
  </div>
</div>

✅ 해결

우연히 소라게 모양으로 회전 했었다. 중심축을 여러 px 간격으로 달리 해보니 또 다른 모양으로 스핀을 한 것을 볼 수 있었다.
어..? 혹시 origin 속성이 부모와 자식간에 상관관계 혹은 상속받는 무언가가 있는것이 아닐까..?

!!!! 해결 !!!! 정말 단순하게, 우연의 일치였다.
내가 생각했던 중심축의 위치가 아니였으며, 또한 속도도 빠르고 도형의 크기가 크다보니 그렇게 보였던 것이다.

💭 개선

• 원리는 알겠으나, 정확히 컨트롤 하기 어렵다. 혹시 노려서 이러한 애니메이션을 구현할 경우, 완벽히 마스터 해야겠다.
• 호들갑 떨지말고, 천천히 하자.