TIL 22 | CSS_transform & transition

1. transform & transition

오늘은 반응형 웹사이트를 만들면서 사용한 transform 과 transition property를 복습하고자 한다.

헤더 페이지를 만드는 모습을 캡쳐했는데, 강의에서는 하단의 첨부된 사진처럼 아이콘 위로 글자를 정렬하고자 하였다.
단순하게 left,right값을 주면 된다고 생각했는데 망부석 마냥 엉덩이를 깔고 움직이질 않았다. (먹어라 요놈아.)

비슷한 일을 일전에도 겪었었는데 알고보니, 이는 내가 기준을 설정해주지 않았기 때문이었다. 그래서 기준점을 정하여 position: relative;를 주고 해당 텍스트는 position: absolute;를 주었다.
그리고 이제 기준점이 생겼으니 그 기준으로 텍스트를 옮겼고 이때 left 와 right 외에도transform 을 주었다. TADA!

transform: translateX(-50%); 이라는 값을 주었는데 그렇다면 transition의 문법과 transform의 문법 모두 확인해 보자. :" D

CSS animate를 하다보면 transform 속성을 많이 사용하게 될 것이다. 이유는 transform속성은 웹요소의 위치를 이동시키거나 크기 조절 및 회전시킬 수 있는 강력한 기능을 가지고 있기 때문이다.

우선 transform의 x, y, z축을 살표보면, CSS 좌표 체계에서 기준점은 브라우저의 왼쪽 상단이 된다.
이전에 알고있는 수학적 지식에서 음수 축 y 가 y 축이되며 x축은 동일하고,
Z축은 입체적인 방향으로 모니터를 바라보고 있는 내 방향을 가리키는 좌표축이다.
또한, 각 좌표축의 화살표 방향이 양의 방향이며, 반대쪽이 음의 방향을 가리킨다.

자 이제, 2D 변형(transform)을 위해 제공되는 메소드(method)에 대해서 살펴보자!

코드와 결과물 : http://tcpschool.com/css/css3_transform_2Dtransform

1) transform:scale()

transform은 요소를 여러가지로 변형시키며 변형 속성은
translate, scale, rotate, skew, matrix가 있다.

transform:scale() - X 또는 Y축으로 확대/ 축소 시킨다.
scale은 해당 요소를 지정한 크기만큼 확대 또는 축소 시킬 수 있다.

2) transform:rotate()

transform:rotate() - 지정 요소 회전시킨다.
rotate는 요소를 지정한 각도만큼 회전시킨다.
회전 각도가 플러스 값일 경우 시계 방향, 마이너스 값일 경우 반시계 방향으로 회전한다.

3) transform:translate()

transform:translate() - 지정 요소 X 또는 Y축으로 이동시킨다.
translate는 요소를 지정한 위치로 X 또는 Y축만큼 이동 시킨다.

4) transform:skew()

transform:skew() - 지정 요소 X 또는 Y축으로 기울이기
skew는 요소를 지정한 만큼 X 또는 Y축으로 기울입니다.

5) transform:matrix()

matrix() 메소드는 모든 2D transform 메소드를 한 줄에 설정할 수 있도록 해준다.
이 메소드는 2D 변형(transform)과 관련된 6개의 매개변수를 가지며matrix() 메소드의 매개변수 순서는 다음과 같다.

문법
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());