요소의 크기나 변형을 가할수 있다.

width나 height는 요소의 좌측상단이 기준인데 transform은 중앙이 기준이고, 기준점을 바꿀수가있따.

장점 : 하드웨어 가속을 이용해서 성능이 좋다.

ex) 모바일에서 absolute로 top이나 left등등으로 위치 조정을 하는것 보다 transform에 translate 사용하는게 더 성능이좋다. (gpu를 사용한다!!!!)

어떤요소의 width 나 height를 변경해서 요소의 크기를 바꾸는것.

transform scale을 이용해서 요소의 크기를 바꾸는것 (연산이 적다)

.box:hover {
						// 기준점이 중앙이다.
            transform: scale(2) rotate(15deg);
            transform-origin: 100% 100%;
						transform : translate(x축이동, y축이동);
						transform : translateX(30px);
        }

// 기준점을 바꾸는 방법 : 좌측 상단
transform-origin : left top;
// 숫자값도 가능 (가로방향 위치, 세로방향 위치)
transform-origin : 0% 0%;
// 기준점을 중앙으로 %로 나타내는 방법
transform-origin. : 50% 50%;

Transition : 어떤 숫자값이 변형이 일어날때 그 중간과정을 애니메이션으로 만들어준다. (width, background-color, fontSize 등등)

.box {
        width: 100px;
        height: 100px;
        border: 2px solid black;
        background: rgba(255, 255, 0, 0.7);
				// box가 hover했을때 변경되는거니깐 transition을 준다.
				// 1. 재생시간 === 플레이시간
				// 1초동안 실행.
        transition: 1s;
				
      }
      .box:hover {
        width: 200px;
        background: red;
        transform: scale(1.5) rotate(15deg);
      }

transition 속성 세부사항

1. transition-property
2. transition-duration : 재생시간
3. transition-timing-function : 가속도 (ex ease)
   1. 내장기능으로 직접 속도를 컨트롤 할수 있다!
   2. cubic-bezier(0.25,0.1,0.49,1.73)
4. transition-delay : transition 동작이 몇초 뒤에 실행되게한다.