CSS transform 요약 정리

 

CSS transform 요약 정리를 해보겠습니다. 

 

transform은 동적인 UI 효과를 낼 때 자주 사용되고 애니메이션과도 연관이 깊으므로, 인터렉티브한 웹을 만들고 싶다면 꼭 알아두는 것이 좋습니다.

 

transform의 속성에는 크게 보아서 2D스러운 효과, 3D스러운 효과가 있다고 할 수 있습니다.

 

 

 

 

2D transform

 

먼저 2D스러운 트랜스폼 효과로는 다음과 같은 것들이 있습니다.

 

• translate() : x축과 y축의 거리만큼 이동합니다.
• rotate() : 입력한 각도(deg)만큼 회전합니다.
• scale() : 배율만큼 요소의 크기를 조절합니다. 1이 100%입니다.
• skew() : 입력한 각도만큼 기울입니다. x축과 y축이 있습니다.
• transform-origin : 회전, 이동 등 transform 효과의 중심점을 설정합니다.
• matrix() : 2D transform 메소드를 축약해서 한꺼번에 쓸 수 있습니다.

포토샵을 해보신 분들이라면 skew까지 이해하기 쉬우실 것 입니다.

 

matrix는 생소하죠? matrix에 대해 좀 더 알아보겠습니다.

지난 글에서 설명드린 background 명령은 배경과 관련된 모든 설정을 한꺼번에 할 수 있었습니다.

 

CSS 배경, 그림자, 그라디언트 요약 정리

 

transform에서는 matrix 명령으로 스케일, 스큐, 트랜슬레이트 등 한꺼번에 관련된 설정을 할 수 있으며 아래의 순서를 따릅니다.

 

/* matrix(scaleX(), skewX(), skewY(), scaleY(), translateX(), translateY()); */

div{matrix(1,2,3,4,5,6);}

 

 

 

그러나 이런 복잡한 matrix 애니메이션은 svg를 이용한 애니메이션 말고는 자주 보지는 못했습니다.

 

 

3D transform

 

2D에서 단순하게 3D스러운 효과를 가능하게 하는 메소드는 바로 perspective입니다.

 

위에서 알아본 rotate, scale등을 그대로 사용하되 z축으로 튀어나오거나 들어가보이게 할 수 있습니다.

 

또한 아래와 같이 메소드에 3d가 들어가는 것들도 있습니다.

 

• rotate3d() : x, y, z값을 입력해 회전합니다.
• translate3d() :  x, y, z값을 입력해 3차원 공간을 이동할 수 있습니다.
• scale3d() :  x, y, z값을 입력해 스케일을 조절할 수 있습니다.

 

기존의 2d메소드들보다 원근감, 깊이를 표현할 수 있어 좀 더 입체적으로 보여집니다.

또한 perspective-origin을 통해 어디를 기준으로 퍼스펙티브 효과를 줄지 설정할 수 있습니다.

 

 

이 밖에 자세한 transform에 대한 정보와 예시는 MDN 트랜스폼 기능 페이지를 참고하시면 되겠습니다. 읽어주셔서 감사합니다.