transform

1. transform (변형) 개요

transform 속성

• 요소에 회전, 크기 조절, 기울이기, 이동효과 부여
• 기본값은 none, 하나 이상의 함수를 사용 가능
• 요소의 변형을 오른쪽부터 왼쪽 순서로 적용시킨다.

크기 - scale

transform : scale();

• 2D로 크기 조절 가능
• scale(sx) / scale(sx-가로, sy-세로) number 값 사용
• scaleX(sx) x축만 변경 가능 / scaleY(sy) y축만 변경 가능
• 박스 모델 공간은 그대로 유지되면서 콘텐츠의 크기를 조절 가능

transform : rotate();

• rotate(a) - <angle> 자료형
• deg - 도, 음수 사용 가능 ( 시계 반대 방향 )
• turn - 1바퀴, 음수 사용 가능 ( 시계 반대 방향 )

이동 - translate()

transform : translate();

• (0,0)을 기준으로 이동시키는 함수
• translate(x축, y축), (x축) 단일 값 사용시 x축만 적용
• translateX() / translateY() 각각의 축만 이동
• 음수 값 사용 가능, % 사용 가능 ( 원래의 0,0을 기준으로 너비, 높이의 퍼센트로 이동 )

기울이기 - skew()

transform : skew();

• skew(ax / ax, ay ) - <angle> 자료형

2. 기준점 - transform-origin

• 기본값 : center;
• 기준점을 변경하게 해주는 속성