scale
이미지의 크기를 조절한다
이미지의 크기를 조절할 때 기준점: 이미지의 가운데
transform: scale(0.8);=> 이미지의 가로, 세로가 모두 x0.8 돼서 작아지는데, 이 이미지 아래에 어떤 문단이 있으면 그 문단의 위치는 변하지 않는다. 이미지가 커져도 문단의 위치는 그대로 유지한다.
이미지의 가로 길이만 줄이고 싶다면?
transform: scaleX(0.5);
rotate
transform: rotate(45deg);=> 이미지가 그 자리에서 시계방향으로 45도 돌아간다.
=> 그 밑에 글 문단이 있다가 이미지와 겹치게 돼도 위치는 유지된다.
translate
요소가 x축, y축에 따라 이동한다.
transform: translate(100px, 150px); transform: translateX(100px); => X축을 따라 오른쪽으로 100px 이동 transform: translateY(-50px); => Y축을 따라 위로 50px 이동 transform: translate(50%, 30%); => (0,0)기준으로 이동, 이미지의 가로의 50%만큼 오른쪽으로 이동, 세로의 30%만큼 아래로 이동.
skew
요소를 기울인다.
transform: skewX(20deg); transform: skew(20deg, 0deg);
transform-origin
요소의 기준점을 변경할 수 있다.
기본값= center
transform-origin: top-left; transform-origin: 50px 100px;이런 식으로 기준점을 변경할 수 있다.
