요소를 이동·회전·확대·기울이는 2D 변환을 사용합니다.
transform은 레이아웃의 원래 자리를 유지한 채 그려지는 결과를 변환합니다. 여러 함수를 한 선언에 쓰며 순서에 따라 결과가 달라집니다.
transform-origin: left center를 축으로 삼은 대상 요소는 5도 회전하는데, rotate의 양수 각도는 화면에서 시계 방향이라 오른쪽 끝이 아래로 내려갑니다. translateX(25px)는 그 전체를 오른쪽으로 25px 옮깁니다. 두 번째 상자는 transform을 scale(0.85) skewX(-8deg)로 덮어써 회전 없이 85% 크기의 기울어진 평행사변형이 되고, 기준점은 .target에서 받은 왼쪽 가운데라 왼쪽 끝을 붙잡은 채 줄어듭니다.
translate, rotate, scale은 transform과 별개인 개별 속성이라 서로를 덮어쓰지 않습니다. 이 셋은 항상 translate, rotate, scale 순서로 적용된 뒤 transform이 더해지므로, hover에서 scale만 바꿔도 이미 준 회전이 지워지지 않습니다.
transform으로 요소를 멀리 옮겨도 원래 레이아웃 공간은 그대로 남습니다.
직접 바꿔보세요rotate와 translate 함수 순서를 바꿔보세요.