transform
transform
- 변형 시킨다는 의미
- 요소에 이동, 회전, 확대축소, 비틀기 등의 변형 효과를 줄 수 있다.
transform의 속성값
translate(x, y)요소의 좌표를 움직일 수 있다.- x축으로 x만큼, y축으로 y만큼 이동시킨다.
- 양수 음수 모두 입력 가능
- 소괄호 안에 한개의 값만 입력된 경우에는 두 영역에 동일한 값이 입력된 것으로 간주한다,
translateX(n) / translateY(n)요소를 X좌표 or Y좌표를 기준으로 n만큼 움직일 수 있다.
scale(x, y)각 축 방향으로 x, y만큼 요소를 축소 혹은 확대- 배수로 측정하기 때문에 기존 요소의 몇 배로 축소, 확대하고 싶은지 입력하면 된다.
scaleX(n) / scaleY(n)x or y축 방향으로 n만큼 요소를 축소 혹은 확대
skew(x, y)요소를 기울여 마름모꼴처럼 만들어준다.
skewX(n) / skewY(n)요소를 X or Y축으로 n도 만큼 기울여준다.
rotate(n)요소를 n만큼 회전시킨다.- 시계방향으로 돌아간다.
transform 중첩적용
transfrom은 여러가지 변환 함수를 중첩해서 속성값으로 줄 수도 있습니다.
tansform : rotate(75deg) translateY(120px);
tansform : skew(30deg, 10deg) rotate(45deg);
tansform : skewY(0.75deg) skewX(20deg);참고
[인프런x코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
https://inf.run/uzui
Carpe diem