transform 파헤치

Transform: {translate} {scale} {rotate} {skew}

rotate /scale/ skew 의  transform-origin은 center, center (50%, 50%) 이다 !!

translate 에 하나의 요소만 있으면 x축만을 의미한다.

skew또한,  x축만 을의미한다.   transform:skew(왼쪽으로 기울임+,상-/하+)

rotate는,회전의 각도가 양수이면 시계 방향으로 회전하고 음수이면 시계 반대방향으로 회전한다.

해당축은 고정되어있고, 원하는 각도 만큼 반대 축이 돌아간다고 생각하면 됨.

scale는,  y축 확대를 의미한다.

2차원 변환 함수

키워드 이름	설명
translate(translate X, translate)	특정 크기만큼 이동합니다.
translateX(translateX)	X축으로 특정 크기만큼 이동합니다.
translateY(translateY)	Y축으로 특정 크기만큼 이동합니다.
scale(scaleX,scaleY)	특정크기만큼 확대 및 축소합니다.
scaleX(scaleX)	X축으로 특정 크기만큼 확대 및 축소합니다.
scaleY(scaleY)	Y축으로 특정 크기만큼 확대 및 축소합니다.
skew(angleX, angleY)	특정 각도만큼 기울입니다.
skewX(angleX)	X축으로 특정각도만큼 기울입니다.
skewY(angleY)	Y축으로 특정각도만큼 기울입니다.
rotate(angleZ)	특정 각도만큼 회전합니다.

3차원 변환 함수

키워드 이름	설명
translate3d(translate X, translateY, translateZ)	특정 크기만큼 이동합니다.
translateX(translateX)	X축으로 특정 크기만큼 이동합니다.
translateY(translateY)	Y축으로 특정 크기만큼 이동합니다.
translateZ(translateZ)	Z축으로 특정 크기만큼 이동합니다.
scale(scaleX, scaleY, scaleZ)	특정크기만큼 확대 및 축소합니다.
scaleX(scaleX)	X축으로 특정 크기만큼 확대 및 축소합니다.
scaleY(scaleY)	Y축으로 특정 크기만큼 확대 및 축소합니다.
scaleZ(scaleZ)	Z축으로 특정 크기만큼 확대 및 축소합니다.
rotate3d(rotateX, rotateY, rotateZ)	특정 각도만큼 회전합니다..
rotateX(rotateX)	X축으로 특정각도만큼 회전합니다.
rotateY(rotateY)	Y축으로 특정각도만큼 회전합니다.
rotateZ(rotateZ)	Z축으로 특정각도만큼 회전합니다.