[CSS] Transform (변형)

 2D 변형 & 3D 변형(transform)

 
 

• CSS3에서는 transform 속성을 사용하여 HTML 요소의 모양, 크기, 위치 등을 자유롭게 변경
• CSS 3에서는 transform 속성을 사용하여 2D 변형(transform)과 3D 변형(transform)을 모두 제공

 
 

1. 2D Transform

 

• 해당 요소를 움직임
• 해당 요소를 회전
• 해당 요소의 크기 변경
• 해당 요소를 기울기
• 해당 요소에 위의 네 가지 동작 중 원하는 동작들을 한 번에 적용

 

---

 

CSS 좌표 체계

 

출처 : TCP

 

• CSS 좌표 체계에서 기준점은 브라우저의 왼쪽 상단
• Z축은 입체적인 방향으로 모니터를 바라보고 있는 '나'의 방향을 가리키는 좌표축
• 각 좌표축의 화살표 방향이 양의 방향이며, 반대쪽이 음의 방향을 가리킨다.

 
 

---

 

2D 변형(transform)

 

translate()	- 현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동 - 주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동
rotate()	- 해당 요소를 주어진 각도만큼 시계 방향이나 반시계 방향으로 회전 - 주어진 각도가 양수이면 시계 방향으로, 음수이면 반시계 방향으로 회전
scale()	- 해당 요소의 크기를 주어진 배율만큼 늘리거나 줄임 - 주어진 배율이 1보다 크면 크기를 늘리고, 0보다 크고 1보다 작으면 크기를 줄임
skewX()	- 해당 요소를 주어진 각도만큼 x축 방향으로 기울임 - 주어진 각도가 양수이면 x축의 양의 방향으로, 음수이면 x축의 음의 방향으로 기울임
skewY()	- 해당 요소를 주어진 각도만큼 y축 방향으로 기울 - 주어진 각도가 양수이면 y축의 양의 방향으로, 음수이면 y축의 음의 방향으로 기울임
skew()	- 해당 요소를 주어진 각도만큼 각각 x축과 y축 방향으로 기울임
matrix()	- 모든 2D transform 메소드를 한 줄에 설정 - 6개의 매개변수를 가진다. - matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

 

---

 

2D transform 속성

 

transform	요소에 2D 또는 3D 변형(transform)을 적용
transform-origin	요소에 변형(transform)을 적용하는 변환 중심을 설정

 
 

---

 

2D transform 메소드

 

matrix(n,n,n,n,n,n)	6개의 매개변수로 모든 2D 변형 메소드를 한 번에 설정함.
translate(x,y)	현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동시킴.
translateX(n)	현재 위치에서 해당 요소를 주어진 x축의 거리만큼 이동시킴.
translateY(n)	현재 위치에서 해당 요소를 주어진 y축의 거리만큼 이동시킴.
rotate(각도)	해당 요소를 주어진 각도만큼 시계 방향이나 반시계 방향으로 회전시킴.
scale(x,y)	해당 요소의 크기를 주어진 배율만큼 늘리거나 줄임.
scaleX(n)	해당 요소의 x축 크기를 주어진 배율만큼 늘리거나 줄임.
scaleY(n)	해당 요소의 y축 크기를 주어진 배율만큼 늘리거나 줄임.
skew(x축각도,y축각도)	해당 요소를 주어진 각도만큼 각각 x축과 y축 방향으로 기울임.
skewX(각도)	해당 요소를 주어진 각도만큼 x축 방향으로 기울임.
skewY(각도)	해당 요소를 주어진 각도만큼 y축 방향으로 기울임.

 

---

 

2. 3D Transform (변형)

 

HTML 요소의 모양, 크기 위치 등을 입체적으로 변형

 

[ 3D 변형 메소드 ]

rotate()	회전
translate()	이동
scale()	크기 조절
matrix()	한 줄에 설정
perspective()	원근법

 
 

메소드	효과
rotateX()	- 해당 요소를 주어진 각도만큼 x축을 기준으로 회전 - 양수이면 x축 양의 방향으로, 음수이면 x축 음의 방향으로 회전
rotateY()	- 해당 요소를 주어진 각도만큼 y축을 기준으로 회전 - 양수이면 y축 양의 방향으로, 음수이면 y축 음의 방향으로 회전
rotateZ()	- 해당 요소를 주어진 각도만큼 z축을 기준으로 회전 - 양수이면 z축 양의 방향으로, 음수이면 z축 음의 방향으로 회전
translate3D()	- 현재 위치에서 해당 요소를 주어진 x축과 y축, z축의 거리만큼 이동 - 주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동시킵니다.

 

• rotate3d(), translate3d(), scale3d() 메소드와 같이 입체적으로 보여지는 3D 변형에 관련된 메소드는 원근감을 표현할 기준을 명시해야 한다.

 
 

---

 

[ 3D transform 속성 ]

 

속성	설명
transform	요소에 2D 또는 3D 변형(transform)을 적용함.
transform-origin	요소에 변형(transform)을 적용하는 변환 중심을 설정함.
transform-style	요소에 변형을 적용할 때 그 변환이 자식(child) 요소들에게도 적용될지 안 될지를 설정함.
perspective	3D 요소에 원근감을 표현할 때 사용할 픽셀 수를 설정함.
perspective-origin	3D 요소에 원근감을 표현할 때 사용할 기준 축을 설정함.
backface-visibility	요소의 앞면만을 표현하고, 뒷면을 표현할지 안 할지를 설정함.

 

---

 

[ 3D transform 메소드 ]

 

메소드	설명
matrix3d(n×16)	4x4 행렬을 이용한 16개의 매개변수로 모든 3D 변형 메소드를 한 번에 설정함.
rotate3d(x,y,z,angle)	해당 요소를 주어진 각도만큼 x축, y축과 z축을 기준으로 회전시킴.
rotateX(angle)	해당 요소를 주어진 각도만큼 x축을 기준으로 회전시킴.
rotateY(angle)	해당 요소를 주어진 각도만큼 y축을 기준으로 회전시킴.
rotateZ(angle)	해당 요소를 주어진 각도만큼 z축을 기준으로 회전시킴.
translate3d(x,y,z)	현재의 위치에서 해당 요소를 주어진 x축, y축과 z축의 거리만큼 이동시킴.
translateX(x)	현재의 위치에서 해당 요소를 주어진 x축의 거리만큼 이동시킴.
translateY(y)	현재의 위치에서 해당 요소를 주어진 y축의 거리만큼 이동시킴.
translateZ(z)	현재의 위치에서 해당 요소를 주어진 z축의 거리만큼 이동시킴.
scale3d(x,y,z)	해당 요소의 크기를 주어진 배율만큼 x축, y축과 z축 방향으로 늘리거나 줄임.
scaleX(x)	해당 요소의 x축 크기를 주어진 배율만큼 늘리거나 줄임.
scaleY(y)	해당 요소의 y축 크기를 주어진 배율만큼 늘리거나 줄임.
scaleZ(z)	해당 요소의 z축 크기를 주어진 배율만큼 늘리거나 줄임.
perspective(n)	3D 요소에 원근감을 표현할 때 사용할 픽셀 수를 설정함.

 
 

---

 

[문법]

 

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* Global values */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

 
 

---

 
 

perspective() - CSS: Cascading Style Sheets | MDN

 

transform - CSS: Cascading Style Sheets | MDN

 

<transform-function> - CSS: Cascading Style Sheets | MDN