Transform 🤖
transform 은 요소에 회전, 크기 조절, 기울이기, 이동 효과등 변형의 효과를 부여하는 프로퍼티이다. 아무것도 적용하지 않은 기본값은 none이다.
- 요소의 위치는 그대로 둔 채 원래의 형태를 변형시킨다.
- Layout(레이아웃) 배치에 영향을 주진 않는다.
Scale , scaleX(), scaleY() - 요소의 크기 변형
scale은 요소의 크기를 조절하는 transform 함수이다.
- scale(x) , scale(x,y) 형식으로 사용
- 두 변수 중 하나만 입력하면 가로와 세로 비율이 같은 비율로 변경된다.
- width, height 속성으로 크기를 조절하는 것과 다름 (위치와 공간은 원래대로 유지)
- scaleX() & scaleY() 는 각각 x,y 변수를 하나씩 갖는다
rotate() - 회전
rotate는 회전을 나타내는 transform 함수이다.
- rotate(angle값) 형식으로 사용한다.
- angle의 단위에는
deg,grad,rad,turn이 있다. - 양수는 시계방향, 음수는 반시계방향으로 회전시킨다.
translate() - 이동
translate는 이동을 담당하는 transform 함수이다.
- 왼쪽 상단 (0,0) 좌표를 기준으로 요소를 이동시킬 수 있다.
- 보이는 상태만 이동시킬 뿐, 레이아웃 상에서 이동시키는 개념이 아니다.
- translate(x,y) 형식으로 사용
- x,y에는 크기 단위 형식을 사용할 수 있다.
- 하나의 변수만 입력받는 경우 x축으로만 이동한다.
skew() - 기울이기
skew 는 기울임(왜곡) 변형을 나타내는 transform 함수이다.
- rotate와 마찬가지로 angle 자료형을 값으로 사용
- skew(x) 혹은 skew(x,y) 형식으로 사용한다 ( 변수 하나면 x축으로만 기울임 )
transform-origin - 기준점 변경 속성
transform-origin 속성은 변형되는 기준점을 설정하는 프로퍼티이다.
- transform 과는 별도로 사용되는 속성임 (함수가 아니다)
- 기본값은
center이다. top,left,right,bottom키워드로 지정할 수 있고 별도의 지정값을 통해 좌표를 설정할 수도 있다.
