zerobase/HTML&CSS
transform
째재
2023. 3. 29. 09:55
728x90
transform
- 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있음
- 시각적 서식 모델의 좌표 공간을 변경
- 키워드 none 또는 하나 이상의 transform-function값을 사용해 지정할 수 있음
- 요소에 변형을 오른쪽부터 왼쪽으로 하나씩 순서대로 적용하는 것과 같음
크기-scale
- scale, scale X, scale Y
- scale(x,y)
- 소숫점도 사용가능함
회전-rotate
- 각에 대한 숫자 하나만 받을 수 있음
- 90deg=100grad=0.25turn
- 180deg=200grad=0.5turn
이동-translate
- 두가지 값을 사용하면 앞은 x, 뒤는 y
- 한가지 값만 입력하면 x축으로만 이동함
- length와 percentage 사용가능
기울이기-skew
- 값을 하나 또는 2개 입력 가능함
- 하나만 입력하면 x축으로만 이동함
기준점-transform-origin
- 기준점을 변경할 때 사용함
- center가 50%임