transform
transform으로 조작한 요소는 레이아웃에 영향을 끼치지 않는다.
1) transform 으로 요소를 조작하더라도, 그 다음으로 오는 요소의 위치는 변하지 않는다.
- float는 바로 다음에 오는 요소에게도 영향을 끼친다.
- width나 height가 변하면 자기가 더 차지하는만큼 다음요소를 밀어버린다.2) transform은 레이아웃에 영향을 끼치지 않기 때문에 변경할때마다 계산이 필요한 속성보다 성능에 좋다.
| 레이아웃에 영향 | 속성명 |
|---|---|
| 영향을 끼치는 속성 | width, heigth, font - size, display |
| 영향을 안 끼치는 속성 | background - color, transform(scale, rotate, translate 등) |
transform 사용팁
보통은 모양을 변형하는 것부터 먼저하고, 후에 축을 잡아서 이동하고 하는 순서가 계산하기 편하다.
transform: translate(100px, 100px), rotate(45deg); //뒤에 쓰인 것부터 실행됨scale()
폰트처럼 벡터그래픽이면 scale해도 픽셀이 안 깨진다.
이미지처럼 비트맵방식이면 픽셀이 깨진다.
scale 을 돋보기로 활용할 수 있겠네요.
CSS 애니메이션 성능 최적화 하는 법
1) 최대한 레이아웃에 영향을 미치지 않는 요소들을 사용한다.
2) 최대한 적게 써서 만든다.
