CSS - transform

transform - CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.

 

translate	translate()	transform: translate(10px, 20px)	X좌표, Y좌표 이동을 나타냅니다.
	translate3d()	transform: translate3d(10px, 20px, 30px)	X좌표, Y좌표, Z좌표 이동을 나타냅니다.
	translateX()	transform: translateX(10px)	X좌표 이동을 나타냅니다.
	translateY()	transform: translateY(10px)	Y좌표 이동을 나타냅니다.
	translateZ()	transform: translateZ(10px)	Z좌표 이동을 나타냅니다.
scale	scale()	transform: scale(2, 2)	선택한 요소의 X축과 Y축 확대를 설정합니다.
	scale3d()	transform: scale3d(2, 2, 2)	선택한 요소의 X축, Y축, Z축 확대를 설정합니다.
	scaleX()	transform: scaleX(2)	선택한 요소의 X축 확대를 설정합니다.
	scaleY()	transform: scaleY(2)	선택한 요소의 Y축 확대를 설정합니다.
	scaleZ()	transform: scaleZ(2)	선택한 요소의 Z축 확대를 설정합니다.
skew	skew()	transform: skew(10deg, 20deg)	선택한 요소의 X축, Y축 회전을 설정합니다.
	skew3d()	transform: skew3d(10deg, 20deg, 30deg)	선택한 요소의 X축, Y축, Z축 회전을 설정합니다.
	skewX()	transform: skewX(10deg)	선택한 요소의 X축 회전을 설정합니다.
	skewY()	transform: skewY(10deg)	선택한 요소의 Y축 회전을 설정합니다.
	skewZ()	transform: skewZ(10deg)	선택한 요소의 Z축 회전을 설정합니다.
etc	transform-origin	transform-origin: 20%, 30%	선택한 요소의 X축, Y축 기준점을 설정합니다.
	transform-style	transform-style: preserve-3d	선택한 요소 스타일을 3D로 설정합니다.
	perspective	perspective: 500px	선택한 요소의 원근점 거리를 설정합니다.
	perspective-origin	perspective-origin: 500px	선택한 요소의 원근점 뱡향을 설정합니다.
	backface-visibility	backface-visibility: hidden;	선택한 요소의 3D 뒷면의 배경 유무를 설정합니다.