transform 사용시 3d를 사용하는 이유

3D transform을 이용하면 3차원 공간에서 요소의 위치나 크기 및 회전을 조정할 수 있다.
이를 잘 사용하면 요소를 3d 공간에서 자유롭게 이동시키고 회전시킬 수 있어 2d transform보다 더 다양한 효과를 줄 수 있다. 가장 간단한 예시를 codepen사이트를 사용하여 만들어 보았다.

마우스를 올리면 css에 설정해 둔 transform으로 인해 안에 있는 div상자가 바뀌는 것을 확인할 수 있다. 이처럼 개발자가 요소들을 3d 공간에서 자유롭게 이동시킬 수 있다.

animation 사용 시에 css로 최적화하는 방법

프론트엔드 개발자로써 웹 브라우저 최적화는 매우 중요한 문제인데, 애니메이션 속성들 중에 성능에 영향을 미치는 속성들을 지양해야 한다.

▶ box-shadow
▶ border-radius
▶ opacity

위와 같은 속성들은 속성에 영향을 미치므로 무분별한 사용을 하지않는 것이 좋다.

또한 requestAnimationFrame()함수를 사용하면 브라우저가 더 부드럽게 처리할 수 있다.

requestAnimationFrame() 함수는 브라우저에게 애니메이션을 수행하고 다음 리페인트(repaint) 이전에 지정된 함수를 호출하여 애니메이션을 업데이트하도록 요청하는 방법입니다.

ex)

function animate() {
  // 애니메이션 코드 작성
  requestAnimationFrame(animate);
}
animate();

이러한 방법들로 animation 사용 시 최적화시켜 줄 수가 있다.

0개의 댓글