transition과 매우 유사

2D Transform Options

  • translate
  • rotate
  • scale
  • skew
  • matrix

translate

transform:translate(x, y);
x pixel을 left/right 로, y pixel을 up/down 으로 움직임

rotate

transform:rotate(deg);
특정 각도로 element를 회전

scale

transform:scale(width, height);
element의 width, height 변경

skew

transform:skew(x-angle, y-angle);
x와 y축에 따라 특정 각도로 element를 돌린다.

matrix

matrix() – 2D transform methods를 하나로 모든 결합

Review

  • transform은 페이지의 보기를 수정하는 방법
  • 상태 변화와 종종 같이 쓴다
  • 일반적으로 browser prefix가 요구됨

공부 위치 – https://www.coursera.org/learn/introcss/lecture/9rzOu/03-03-transforms