---

변형 (transform)

CSS3 에서 사용하는 속성으로 HTML 요소의 위치, 모양, 크기 등을 변형시킬 수 있다.
transform 속성의 변형 함수들은 2차원의 2D 형태로 변형하고자 할 때와 3차원의 3D 형태로 변형하고자 할 때로 나뉘어 사용된다.

변형 (transform) 함수의 분류

• 2차원의 2D 형태로 변형하고자 할 때
• 3차원의 3D 형태로 변형하고자 할 때

---

📌 2차원 변형 함수와 3차원 변형 함수

변형 형태	이동 함수	회전 함수	크기 함수	기울기 함수
2차원 변형	translate(x,y)	rotate(deg)	scale(xdeg,ydeg)	skew(x,y)
	translateX(x)		scaleX(x)	skewX(deg)
	translateY(y)		scaleY(y)	skewY(deg)
3차원 변형	translate3d(x,y,z)	rotate3d(x,y,z,deg)	scale3d(x,y,z)
	translateX(x)	rotateX(deg)	scaleX(x)
	translateY(y)	rotateY(deg)	scaleY(y)
	translateZ(z)	rotateZ(deg)	scaleZ(z)

📌 2차원 변형 속성과 3차원 변형 속성

변형 형태	속성	속성값	설명	참고
2차원 변형	transform	함수(함수값)	변환 방식 지정
	transform-origin	x,y,z	변환 기준점 지정	길이값, 백분율, 키워드 사용
		initial	기본값	가운데 (50%,50%)
		inherit	부모요소로부터 상속
3차원 변형	transform	함수(함수값)	변환 방식 지정
	transform-origin	x,y,z	변환 기준점 지정	길이값, 백분율, 키워드 사용
		initial	기본값	가운데 (50%,50%)
		inherit	부모요소로부터 상속
	transform-style	flat	3d 변형을 상속하지 않음	하위요소들은 2d로 처리
		preserve-3d	3d 변형을 상속	하위요소들은 상속된 3d로 처리
	perspective	크기	원근감을 사용함	0보다 큰, 숫자가 클수록 멀어짐
		none	원근감 사용하지 않음
	perspective-origin	x,y	요소의 바닥 고정 지점을 지정
	backface-visibility	visible	요소의 뒷면을 표현함
		hidden	요소의 뒷면을 숨김

---

2차원 변형 함수

2차원 변형이란 수평이나 수직으로 요소를 변형시키는 것을 말하며 x축 과 y축 의 좌표만을 사용한다.
x축 은 값이 커질수록 오른쪽으로, y축 은 값이 커질수록 아래쪽으로 변형된다.

2차원 변형 함수는 이동 함수 (translate) , 회전 함수 (rotate) , 크기 함수 (scale) , 기울기 함수 (skew), 단축형 함수 (matrix) 가 있다.

💡 이동 함수 (translate)

선택자 {
		transform: translate(x,y);
        		   translateX(x);
                   translateY(y);}

이동 함수는 지정한 기준축을 기준으로 지정한 거리값만큼 해당 요소를 이동시키는 함수이다.
각 x값과 y값에는 px 이나 em , % 같은 단위로 길이값을 명시한다. (양수, 0, 음수)

요소는 원래 자신이 있던 위치를 기준으로 이동하는 것이기 때문에 원래 위치 정보는 남아있다고 볼 수 있다. 즉, 해당 위치로 이동하였다고 해도 요소가 원래 차지했던 공간의 위치는 그대로 유지되는 것이다.

position 속성과 translate() 함수의 비교는 웹클럽 블로그에서 공부하자 !!
공부해보고 따로 정리해보자 !!
https://webclub.tistory.com/619

• translate(tx,ty) : 지정한 t값 만큼 각 축으로 이동한다.
• translateX(tx) : 지정한 t값 만큼 x축으로 이동한다.
• translateY(ty) : 지정한 t값 만큼 y축으로 이동한다.

💡 회전 함수 (rotate)

선택자 {
		transform: rotate(deg);}

회전 함수는 지정한 기준축을 기준으로 지정한 각도값만큼 해당 요소를 회전시키는 함수이다.
각도는 deg 로 명시하고, 시계방향 기준으로 0deg - 90deg - 180deg - 270deg 로 계산한다.
각도가 양수면 시계방향으로 회전하고, 각도가 음수면 반시계방향으로 회전한다.

rotateX(deg) 와 rotateY(deg) 값을 사용하지 않는 이유는 3차원 변형 속성인 원근감 (소실점, 투시점) perspective 속성을 부여해야만, 해당 요소가 기준축을 기준으로 회전하는 변형이 눈에 보이기 때문이다. 이 원근감 속성을 부여하지 못하는 2차원 변형 함수로 위 두 함수를 써봤자 양옆 또는 위아래로 찌그러지는 형태만 볼 수 있다.

• rotate(deg) : 지정한 각도만큼 회전한다. (양수면 시계방향, 음수면 반시계방향)

💡 크기 함수 (scale)

선택자 {
		transform: scale(x,y);
        		   scaleX(x);
                   scaleY(y);}

크기 함수는 지정한 기준축을 기준으로 지정한 크기값만큼 해당 요소를 확대 또는 축소시키는 함수이다.
각 x값과 y값에는 배수 단위의 배율을 명시한다.
1은 100% 를 의미하니 0에서 1사이의 값은 해당 요소를 축소시키고, 1보다 큰 값은 해당 요소를 확대시킨다.

• scale(sx,sy) : 지정한 s값만큼 각 축쪽으로 확대 또는 축소된다.
  ex) scale(2) 인 경우에는 해당 요소가 전체적으로 두배 확대된다.
• scaleX(sx) : 지정한 s값만큼 x축쪽으로 확대 또는 축소된다.
• scaleY(sy) : 지정한 s값만큼 y축쪽으로 확대 또는 축소된다.

💡 기울기 함수 (skew)

선텍자 {
		transform: skew(xdeg,ydeg);
        		   skewX(deg);
                   skewY(deg);}

기울기 함수는 지정한 기준축을 기준으로 지정한 각도값만큼 해당 요소를 기울게 하는 함수이다.
'기울게' 라는 표현보다는 '비틀어 왜곡시킨다.' 라고 표현해도 될 것 같다.
각도는 deg 로 명시하고, 시계방향 기준으로 0deg - 90deg - 180deg - 270deg 로 계산한다.
각도가 양수면 시계방향으로 기울이고, 각도가 음수면 반시계방향으로 기울인다.

skew() 함수는 3차원 변형 함수로는 사용되지 않는다.

• skew(xdeg,ydeg) : 각 기준축을 기준으로 지정한 각도값만큼 기울인다.
• skewX(deg) : x축을 기준으로 지정한 각도값만큼 기울인다. (양옆으로 기울어진다고 생각하면 쉬움)
• skewY(deg) : y축을 기준으로 지정한 각도값만큼 기울인다. (위아래로 기울어진다고 생각하면 쉬움)

💡 단축형 함수 (matrix)

선택자 {
		matrix: (scaleX(x),skewY(y),skewX(x),scaleY(y),translateX(x),translateY(y));}

단축형 함수 matrix 는 모든 2차원 변형 함수를 한줄에 명시할 수 있도록 한다.
순서는 크기x값, 기울기y값, 기울기x값, 크기y값, 이동x값, 이동y값 순이다.

---

2차원 변형 속성

2차원 변형 속성에는 transform 속성과 transform-origin 속성이 있다.

💡 transform

선택자 {
		transform: 함수(함수값);}

transform 속성은 위 변형 함수들을 명시할 때 사용되는 속성이다.

💡 transform-origin

선택자 {
		transform-ofigin: x,y,z / initial / inherit;}

요소를 변형시킬 때, 해당 요소의 변형 기준점을 지정하는 속성이다.
이 속성을 사용하여 변형 기준점을 지정하면 요소는 해당 기준점을 기준으로 변형된다.
기본값은 (50%,50%) 로 가운데이다.

• x,y,z : 변형 기준점이 될 x축, y축, z축의 위치를 지정한다.

  길이값 (px) 또는 백분율 (%)
  키워드

  x축의 키워드는 left center right
  y축의 키워드는 top center `bottom``
  z축은 길이값만 사용한다.

• initial : 변형 기준점을 기본값 (50%,50%) 으로 지정

• inherit : 변형 기준점을 부모요소로부터 상속받아 지정

---

3차원 변형 함수

3차원 변형이란 수평이나 수직으로 변형시킴과 동시에 원근감을 추가하는 것을 말하며 x축 과 y축 , z축 의 좌표를 사용한다.
x축 은 값이 커질수록 오른쪽으로, y축 은 값이 커질수록 아래쪽으로 변형된다.
z축 은 값이 커질수록 사용자로부터 가까이, 값이 작아질수록 사용자로부터 멀게 변형된다. (앞뒤)

해당 3차원 변형 함수가 3d 로 구현되기 위해서는 perspective 속성을 부여해야 한다.
이 원근감 속성을 부여하지 않으면 3차원 변형함수라도 3차원으로 구현되지 않고 평면의 2차원으로 구현될 수 있다.

3차원 변형 함수는 이동 함수 (translate) , 회전 함수 (rotate) , 크기 함수 (scale) , 단축형 함수 (matrix3d) 가 있다.

💡 3차원 이동 함수 (translate)

선택자 {
		transform: translate3d(x,y,z);
        		   translateX(x);
                   translateY(y);
                   translateZ(z);}

3차원 이동 함수는 지정한 기준축을 기준으로 지정한 거리값만큼 해당 요소를 이동시키는 함수이다.
각 x값과 y값, z값에는 px 이나 em , % 같은 단위로 길이값을 명시한다. (양수, 0, 음수)

• translate3d(tx,ty,tz) : 지정한 t값 만큼 각 축으로 이동한다.
• translateX(tx) : 지정한 t값 만큼 x축으로 이동한다.
• translateY(ty) : 지정한 t값 만큼 y축으로 이동한다.
• translateZ(zy) : 지정한 t값 만큼 z축으로 이동한다.

💡 3차원 회전 함수 (rotate)

선택자 {
		transform: rotate3d(x,y,z,각도)
        		   rotateX(x)
                   rotateY(y)
                   rotateZ(z);}

3차원 회전 함수는 지정한 기준축을 기준으로 지정한 각도값만큼 해당 요소를 회전시키는 함수이다.
각도는 deg 로 명시하고, 시계방향 기준으로 0deg - 90deg - 180deg - 270deg 로 계산한다.
각도가 양수면 시계방향으로 회전하고, 각도가 음수면 반시계방향으로 회전한다.

• rotate3d(rx,ry,rz,deg) : 지정한 r값의 각 기준축 지점에서 지정한 각도만큼 회전한다. (양수면 시계방향, 음수면 반시계방향)
• rotateX(deg) : x축을 기준으로 지정한 각도만큼 회전한다.
• rotateY(deg) : y축을 기준으로 지정한 각도만큼 회전한다.
• rotatez(deg) : z축을 기준으로 지정한 각도만큼 회전한다.

💡 3차원 크기 함수 (scale)

선택자 {
		transform: scale3d(x,y,z)
        		   scaleX(x)
                   scaleY(y)
                   scaleZ(z);}

크기 함수는 지정한 기준축을 기준으로 지정한 크기값만큼 해당 요소를 확대 또는 축소시키는 함수이다.
각 x값과 y값, z값에는 배수 단위의 배율을 명시한다.
1은 100% 를 의미하니 0에서 1사이의 값은 해당 요소를 축소시키고, 1보다 큰 값은 해당 요소를 확대시킨다.

• scale3d(sx,sy,sz) : 지정한 s값만큼 각 축쪽으로 확대 또는 축소된다.
  ex) scale(2) 인 경우에는 해당 요소가 전체적으로 두배 확대된다.
• scaleX(sx) : 지정한 s값만큼 x축쪽으로 확대 또는 축소된다.
• scaleY(sy) : 지정한 s값만큼 y축쪽으로 확대 또는 축소된다.
• scaleZ(sz) : 지정한 s값만큼 z축쪽으로 확대 또는 축소된다.

💡 3차원 단축형 함수 (matrix3d)

선택자 {
		matrix3d: (16개의 n값);}

3차원 변형 함수의 단축형 함수 matrix3d 는 모든 3차원 변형 함수를 한줄에 명시할 수 있도록 한다.
좌표평면이 아닌 좌표공간에 대한 함수이다. 너무 어렵다...

matrix3d 속성을 사용하고자 할 때에는 좋은 사이트들을 많이 이용하도록 하자...

---

3차원 변형 속성

3차원 변형 속성에는 transform , transform-origin , transform-style , perspective , perspective-origin , backface-visibility 속성이 있다.

💡 transform

선택자 {
		transform: 함수(함수값);}

transform 속성은 위 변형 함수들을 명시할 때 사용되는 속성이다.

💡 transform-origin

선택자 {
		transform-ofigin: x,y,z / initial / inherit;}

요소를 변형시킬 때, 해당 요소의 변형 기준점을 지정하는 속성이다.
이 속성을 사용하여 변형 기준점을 지정하면 요소는 해당 기준점을 기준으로 변형된다.
기본값은 (50%,50%) 로 가운데이다.

• x,y,z : 변형 기준점이 될 x축, y축, z축의 위치를 지정한다.

  길이값 (px) 또는 백분율 (%)
  키워드

  x축의 키워드는 left center right
  y축의 키워드는 top center `bottom``
  z축은 길이값만 사용한다.

• initial : 변형 기준점을 기본값 (50%,50%) 으로 지정

• inherit : 변형 기준점을 부모요소로부터 상속받아 지정

💡 transform-style

선택자 {
		transform-style: flat / preserve-3d;}

요소를 변형시킬 때, 해당 변환이 자식요소에게도 상속할것인지 지정하는 속성이다.
기본값은 flat 이다.

• flat : 상속하지 않음 (상속되지 않은 하위요소들은 2차원 변형으로 처리됨)
• preserve-3d : 상속함 (상속된 하위 요소들은 3차원 변형으로 처리됨)

💡 perspective

선택자 {
		perspective: 크기값 / none;}

3차원 변형 함수의 구현을 위해 꼭 필요한 원근감 속성이다.
3차원 함수를 구현하기 위해 꼭 필요한 이 원근감 (소실점, 투영점) 속성을 부여하지 않으면 2차원 평면으로 구현된다. 때문에 3차원 변형 함수와 함께 꼭 지정해야하는 속성이다.
이 perspective 속성은 요소와 사용자간의 거리를 결정한다.

• 크기값 : 0보다 큰 숫자를 사용한다.

값이 작아질수록 해당 요소는 사용자로부터 멀어보이고, 값이 커질수록 해당 요소는 사용자로부터 가까워보인다.

• none : 원근감을 표현하지 않는다.

💡 perspective-origin

선택자 {
		perspective-origin: x위치값 y위치값;}

3차원 변형 함수에 원근감 속성을 부여했을 때, 해당 원근감 변환의 기준점을 지정하는 속성이다.
키워드로 나타낸다면 bottom 의 위치를 지정하는 것과 같다.
이 속성을 사용하려면 원근감 속성인 perspective 속성과 함께 사용해야 한다.

x축과 y축의 위치값 표기

기본값은 50%,50% 로 가운데이다.
길이값 px 또는 해당 요소의 너비 기준인 백분율 % 로 표기하고, 값이 음수일 수 있다.
키워드로 표기할 수 있다.

x축 키워드 : left center right
y축 키워드 : top center bottom

💡 backface-visibility

선택자 {
		backface-visibility: visible / hidden / initial / inherit;}

3차원 변형 함수에 원근감 속성을 부여했을 때, 요소의 뒷면 (반대쪽 면) 을 앞에서 보이도록 할 것인지 지정하는 속성이다. 이면가시성 속성 이라고도 불린다.

이 속성은 박스 형태나 다각형의 도형 형태로 요소가 구현될 때 사용할만 하다.

• visible : 요소의 뒷면이 앞에서 보이도록 지정한다. (기본값)
• hidden : 요소의 뒷면을 숨기도록 지정한다.
• initial : 기본값으로 지정한다. (visible)
• inherit : 해당 값을 부모요소로부터 상속받을 것을 지정한다.