요소를 이동·회전·확대·기울이는 2D 변환을 사용합니다.
transform은 레이아웃의 원래 자리를 유지한 채 그려지는 결과를 변환합니다. 여러 함수를 한 선언에 쓰며 순서에 따라 결과가 달라집니다.
이번 예제의 출발점은 transform: translateX(20px) rotate(6deg);입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 rotate와 translate 함수 순서를 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
transform으로 요소를 멀리 옮겨도 원래 레이아웃 공간은 그대로 남습니다.
직접 바꿔보세요rotate와 translate 함수 순서를 바꿔보세요.