CSS 변형 관련 스타일

transform

: 변형과 관련된 속성

css 속성 작성 시 크로스 브라우저 처리 방법
1) -ms- : 마이크로 소프트 (익스플로어, 엣지)
2)  -webkit- : 크롬, 사파리
3) -o- : 오페라
4) -moz- : 파이어폭스

translate

: 이동과 관련된 속성

좌우 이동
- transform: translateX(<x축 이동거리>);

상하 이동
- transform: translateY(<y축 이동거리>);

대각선 이동
- transform: translate(<x축>, <y축>);

scale

: 크기(배율)과 관련된 속성

좌우 크기 조정
- transform: scaleX(<배율>);

상하 크기 조정
- transform: scaleY<배율>

대각선 크기 조정
- transform: scale(<x축 배율>, <y축 배율>);

rotate

: 회전과 관련된 속성

- transform: rotate(<회전시킬 각>);

perspective

: 원근법 적용(z축 길이) 속성

- transform: perspective(<이동할 z축 값>)

transition-duration

: 요소의 변형을 진행하는 속도를 조정하는 속성

- transition-duration: <시간>;

transition-dela

: 요소의 변형을 진행하는 시간을 늦추는 속성

- transition-delay: <시간>;