Transform

Concepts

It allows us to rotate (회전), scale (크게 / 작게), skew (비틀기), or translate(이동) an element.
내부적으로 GPU Acceleration 사용하여 부드럽게 작동 (이게 있기 전에는 width 를 left 기준으로 픽셀마다 옮기는 작업을 구현했었는데, 부드럽지 못했음).

Use Case

언제 많이 사용하나 보면, menu나 탭 hover 시 살짝 크게 해줄때.
Interactive Web에서 기본중에 기본이다.

Sample Code

.box:hover {
    transform: scale(1.2) translateX(100px);
    transform-origin: bottom;
    transition-delay: 1s;
    transition-duration: 1s;
}

flip image

img:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}