translate

요소의 위치를 수평 또는 수직 방향으로 변경하거나, 수평 및 수직 방향으로 변경

transform: translate(100px, 200px);

transform: translateX(100px);
transform: translateY(200px);

참고) 요소를 정중앙에 오게하는 법

position : absolute;
left: 50%
top: 50%
transform: translate(-50%, -50%);

scale

scaleX는 translateX와 다르게 좌우를 고려하여 확대/축소된다. scaleY는 상하를 고려하여 확대/축소된다.

transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);

rotate

회전을 나타낸다. 양수는 시계방향, 음수는 반시계방향으로 회전한다.

rotateX는 x축을 중심으로 회전, rotateY는 y축을 중심으로 회전, rotate는 z축을 중심으로 회전한다.

transform: rotate(45deg); //단위로는 deg, grad, rad, turn 이 있다.

transform-origin

트랜스폼이 일어나는 기준점을 바꿀 수 있다.

transform-origin: x-axis y-axis; 형식이다.

transform-origin: top left;