[CSS] Transform

Transition

선택자가 변화되는 것을 시간의 두고 변화시키는 속성.

Animation

하나의 줄거리(@keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현함.

Transform

CSS transform 속성으로 요소에 회전(rotate), 크기 조절(scale), 기울이기(skey), 이동(translate) 효과를 부여함. CSS 시각적 서식 모델의 좌표 공간을 변경함.

애니메이션 효과를 제공하지 않음. 애니메이션 효과 필요시, transition이나 animation과 함께 사용해야 함.

 

https://developer.mozilla.org/ko/docs/Web/CSS/transform

 

 

Transform functions

scaleX(a) scaleY(b) : scale(a b) : x축 a배, y축 b배 사이즈 조정

skewX(a) skewY(b) : skew(a, b) : 기울임

translate() : 좌우 또는 상하로 이동

rotate() : 시계 방향으로 회전

matrix()

perspective()