[CSS] Transform 전체

성능개선을 위해 Reflow를 최소화하자

브라우저 렌더링 과정에서 핵심은 Reflow(지오메트리를 다시 편성하는 작업 = 레이아웃을 재계산하는 상황)

Repaint = 재결합된 렌더 트리 기반으로 화면에 다시 페인트

cf. reflow 발생시 repaint 필연적으로 발생하는데, reflow는 HTML 요소의 위치/크기 재계산해야함 => repaint에 비해 시간 오래 걸림 (변경하려는 특정요소 뿐 아니라, 연관된 다른 요소의 위치/크기까지 재계산ㅜㅜ🥲)

width와 height등과 같은 기하학적 속성의 변경은 리플로우 필요함
=> 모든 요소들의 위치와 크기를 파악하도록 계산하는데 많은 시간이 걸림
=> 가능한 피해라

리플로우 발생시키는 CSS트리거: https://csstriggers.com/

기하학적 속성 변경이 불가피하면, transform 사용
or visibility, display보다 opacity를 사용하는 것이 성능 개선에 도움

---

/* transform: scale(2); */
width: 200px;
height: 200px;

Transform 사용했을 때
단순 width height 값을 조정했을 때

---

rotate

transform: scale(2) rotate(15deg);

skew

transform: skew(30deg);

---

transform: skewY(30deg);

---

translate

transform: translate(30px, 10px);

---

transform-origin

기준점 변경

left top = 0% 0%
right bottom = 100% 100%
center = 50% 50% (defalut)

transform: scale(1.5);
/* transform-origin: left top; */
transform-origin: 0% 0%;

---

기준점 left top

transform: rotate(30deg);
transform-origin: 0% 0%;

---

기준점 right btm

transform: rotate(30deg);
transform-origin: 100% 100%;

Reference :
JavaScript | Reflow 란 (feat. 브라우저 렌더링)