CSS - transform

transform

'transform'은 요소에 확대축소(scale), 회전(rotate), 이동(translate), 비틀기(skew) 효과를 부여할 수 있다.

PoiemaWeb 참고.

---

scale

img의 width를 200px로 설정한 경우.

scale(0.5) -> 절반이 줄어듦.

x축, Y축 다르게 설정. 짜부됨.

x축만 scale 적용 가능.

Y축만 scale 적용 가능.

---

rotate

요소를 angle만큼 회전시킨다.

45deg, 90deg, 180deg, 360deg.
텍스트는 그대로 있음.

---

translate

요소를 이동시킨다.

x축으로 100px만큼 이동.

Y축으로 200px만큼 이동.

translate에 값을 하나만 쓴 경우는 x축으로 적용된다.

%(퍼센트) 사용 가능.

---

skew

요소를 기울인다.

skew도 마찬가지로 값을 하나만 준다면, x축으로 기울인다.

skewY를 통해 Y축으로 기울이기.

---

transform-origin

요소의 기본기준점을 설정할 때 사용된다. 기본기준점은 요소의 정중앙이다(50%,50%).

아무 transform 속성을 부여하지 않은 상태.

transform-origin을 top left로 주면, 파란색 꼭짓점이 기준이 된다.

transform-origin을 bottom right로 준 것.