transform

CSS transform: translate vs. absolute positioning

CSS로 엘리먼트의 위치를 잡을 때 translate 또는 top: 0px; left: 0px; 과 같은 absolute positioning을 사용한다. 쿠키런을 개발하면서 쿠키의 위치를 매 프레임 translate 값을 변경하며 이동시켰기 때문에, 아무 생각 없이 장애물의 위치를 쿠키와 마찬가지로 translate를 이용해 잡았었다(JS 코드에서). 이후 장애물 파괴 애니메이션을 추가하며 인라인 스타일 우선순위로 인해 transform: rotate 속성을 적용시키지 못해 고생하다가, 장애물을 생성할 때 왜 굳이 translate를 사용했는지.. 근본적인 의문이 생긴 것이다. 목적 우선 translate와 absolute positioning은 목적부터 다르다. translate는 위치 이동이 필요한..

CSS, JS transform / JS requestAnimationFrame - 애니메이션 만들기

웹에서 애니메이션을 만드는 방법은 크게 세 가지가 있다. 각각의 특징에 맞게 선택해서 사용하면 된다. 세 방법 간에 미묘한 차이가 있는데, 찾은 자료가 다 영어고 번역했더니 이상해서 그대로 가져왔다. CSS transform Use CSS when you have smaller, self-contained states for UI elements. 작은 엘리먼트거나 엘리먼트 자체가 변경되는 경우 css 코드에서 transform을 이용한다. 나는 게임 캐릭터가 반대편을 봐야하는 상황에서 캐릭터에 flip 클래스를 추가하고 flip 클래스의 css 코드에 transform 속성을 작성했다. transform에는 다음과 같은 값들을 넣을 수 있다. /* 키워드 값 */ transform: none; /* 함..