CSS-transform_tanslate, scale, rotate, skew

transform : 박스모델 변형 관련 스타일 속성
속성값 : 변형 관련 함수 - tanslate(이동), scale(배율), rotate(각도), skew(비틀기) 등

transform 예시

translate(x, y) : 박스모델을 가로(X)와 세로(Y) 방향으로 이동하는 함수 - 단위 : px

#translate img {
	transform: translate(20px, 20px);
}

translatex(x) : 박스모델을 가로(X) 방향으로 이동하는 함수 - 단위 : px

#translatex img {
	transform: translatex(20px);
}

translatey(y) : 박스모델을 세로(Y) 방향으로 이동하는 함수 - 단위 : px

#translatey img {
	transform: translatey(-20px);
}

translatez(z) : 박스모델을 원근(z) 방향으로 이동하는 함수 - 단위 : px

#translatez img {
	transform: translatez(-20px);
}

translatez(z)를 보다 명확하게 표현하기 위한 속성
perspective : Z 영역 관련 스타일 속성
속성값 : Z 영역에 대한 깊이를 px 단위로 설정

translate3d(x, y, z) : 박스모델을 입체적으로 이동하는 함수 - 단위 : px

#translate3d img {
	transform: translate3d(-20px, -20px, -20px);
}

scale(x, y) : 박스모델을 가로와 세로 방향으로 확대 또는 축소하는 함수 - 단위 : 배율

#scale img {
	transform: scale(1.2, 1.2);
}

scalex(x) : 박스모델을 가로 방향으로 확대 또는 축소하는 함수 - 단위 : 배율

#scalex img {
	transform: scalex(0.8);
}

scaley(y) : 박스모델을 세로 방향으로 확대 또는 축소하는 함수 - 단위 : 배율

#scaley img {
	transform: scaley(1.2);
}

scalez(z) : 박스모델을 원근 방향으로 확대 또는 축소하는 함수 - 단위 : 배율

#scalez img {
	transform: scalez(.8);
}

scale3d(x, y, z) : 박스모델을 입체적으로 확대 또는 축소하는 함수 - 단위 : 배율

#scale3d img {
	transform: scale3d(1.2,1.2,.8);
}

rotate 예시

rotate(각도) : 박스모델을 가로와 세로 방향으로 회전하는 함수 - 단위 : deg

#rotate img {
	/* transform: rotate(45deg); */
	transform: rotate(0.5turn);
}

rotatex(각도) : 박스모델을 가로 방향으로 회전하는 함수 - 단위 : deg

#rotatex img {
	transform: rotatex(45deg);
}

rotatey(각도) : 박스모델을 세로 방향으로 회전하는 함수 - 단위 : deg

#rotatey img {
	transform: rotatey(45deg);
}

rotatez(각도) : 박스모델을 원근 방향으로 회전하는 함수 - 단위 : deg

#rotatez img {
	transform: rotatez(45deg);
}

rotate3d(x,y,z,각도) : 박스모델을 입체적으로 회전하는 함수 - 단위 : deg

#rotate3d img {
	transform: rotate3d(-1,1,2,45deg);
}

skew 예시

skew(x, y) : 박스모델을 가로와 세로 방향으로 비트는 함수 - 단위 : deg

#skew img {
	transform: skew(-25deg, -25deg);
}

skewx(x) : 박스모델을 가로 방향으로 비트는 함수 - 단위 : deg

#skewx img {
	transform: skewx(30deg);
}

skewy(y) : 박스모델을 세로 방향으로 비트는 함수 - 단위 : deg

#skewy img {
	transform: skewy(30deg);
}