transform / transform-origin

transform

element의 모양,크기,위치,회전 변경시키는 CSS attribute.

 

translate( )

element를 현재 위치에서 x,y만큼 이동

See the Pen transform - translate by zakelstorm (@zakelstorm) on CodePen.

rotate( )

rotate() 메소드는 해당 요소를 주어진 각도만큼 시계 방향이나 반시계 방향으로 회전시킨다.

주어진 각도가 양수이면 시계 방향으로, 음수이면 반시계 방향으로 회전시킨다.

See the Pen abmZNGP by zakelstorm (@zakelstorm) on CodePen.

sclae( )

scale() 메소드는 해당 요소의 크기를 주어진 배율만큼 늘리거나 줄인다.

주어진 배율이 1보다 크면 크기를 늘리고, 0보다 크고 1보다 작으면 크기를 줄인다.

• transform-origin

  • transform 속성과 함께 사용되는 속성으로서, 회전 중심(원점·기준점)을 지정한다.

See the Pen wvzWGEJ by zakelstorm (@zakelstorm) on CodePen.

 

skew( )

skew() 메소드는 해당 요소를 주어진 각도만큼 각각 x축과 y축 방향으로 기울인다.

See the Pen transform - skew by zakelstorm (@zakelstorm) on CodePen.

 

matrix( )

해당 메소드는 모든 transform 메소드를 한 줄에 설정할 수 있도록 해준다.

 

이 메소드는 2D 변형(transform)과 관련된 6개의 매개변수를 가진다.

matrix() 메소드의 매개변수 순서는 다음과 같다.

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

---