2021.2.26(thu)_translate

✱ translate()

원래의 위치를 기준으로 이동하고, 원래의 위치 정보는 남아있다.

값을 하나만 넣으면 x축 이동, y축은 그대로(이동X)

 

position	translate
해당 요소의 컨테이너를 기준으로	해당 요소의 본래 위치를 기준으로
absolute의 경우 레이아웃의 다른 요소들과 완전히 별개의 존재가 되어 영향을 미치지 않음	본래 차지하고 있던 공간을 그대로 유지
주로 레이아웃을 짤 때	주로 hover, active와 같은 트리거 이벤트에

 

top, left는 각 프레임을 그려내는 데 너무 많은 시간을 소요한다. 그 결과 약간 뚝뚝 끊어지는 듯이 전이가 이루어진다.
반면에 translate는 요소가 GPU(RenderLayer)상에서 자기 자신의 레이어 위에 놓여지도록 만든다.
GPU 상에서 그 자신의 레이어 위에 놓이기 때문에 2D 전환이 훨씬 빠르게 진행되고 프레임 속도도 빠르다.
   - Paul Irish

 

 translate에 값의 단위로 %를 쓸 때 해당 요소의 너비 높이 기준이라고 대단한 착각을 했었다. 그래서 3개의 슬라이드를 캐로셀로 만들 때 방향버튼을 누를 때마다 33.333%로 이동하고 반대 방향일 때는 -33.333%로 이동해야겠다라고 생각했다. 그래서 다음과 같은 코드를 짰었다.

 

3개 중에 2번째 요소가 보일 때 화살표 버튼을 누르면 처음에 원하는대로 이동한다. 그 다음에 보이는 게 1번째 요소나 3번째 요소일 때 화살표 버튼을 누르면 휘리릭하고 가운데 요소는 건너뛰고 마지막 요소로 가버리거나 첫번째 요소로 이동했다. 그래서 translate의 이동 기준을 찾아보았는데 요소의 원래 위치였다.

 

즉, 33.333% 이동을 시키는 것이 현재 요소의 위치가 아니라 원래 있었던 위치에서 33.333% 이동하는 것이다. 그러니까 요소의 이동된 위치와는 상관없이 33.333%는 항상 같은 위치이고 -33.333%도 항상 같은 위치이다. %단위가 아니라 px이라도. 그래서 또 다시 이동을 해야한다면 translate값을 초기화시켜주어야 한다.