transform
변형속성은 박스요소의 모양을 변형시키는 속성으로
x,y축을 이용하는 2차원 변형속성과 x,y,z축을
이용하는 3차원 변형속성으로 나눠진다.
z축은 모니터로부터 사용자쪽으로 가까워질수록 양수이며,
멀어질수록 음수값을 쓰는 입체축이다.2차원 변형
태그의 모양을 변형시킬때 2차원 변형함수나 3차원 변형함수를 이용한다.
함수들은 transform의 속성값으로 사용되고 ()사이에 올바른 값을 넣어주면 된다.
2차원 변형함수는 x축과 y축을 이용하여 태그의 모양을 변형시킨다. [속성]
- translate(x, y)
: 특정 크기만큼 x축과 y축으로 이동시킨다.
단위는 px이나 %, vw, vh단위를 쓴다.
- translateX(x축)
: 특정 크기만큼 x축으로 이동시킨다.
- translateY(y축)
: 특정 크기만큼 y축으로 이동시킨다.
- scale(x, y)
: 특정 크기만큼 확대 및 축소시킨다. 단위없이 배수를 쓴다.
1이 100%이며 만약 1.2라고 쓰면 120% 크게 태그가 늘어난다.
확대되거나 축소될때 박스의 중앙을 기준으로 확대/축소되며
안에 들어있는 컨텐츠(글자나 이미지)도 함께 확대/축소된다.
- scaleX(배수)
: 특정 크기만큼 x축으로 확대시킨다.(넓이)
- scaleY(배수)
: 특정 크기만큼 y축으로 확대시킨다.(높이)
- skew(x, y)
: 특정 각도만큼 비튼다. 사다리꼴처럼 비틀어 변형시킨다.
각도의 단위는 deg으로 표현하고, top위치가 0도이며 시계방향으로 돌아가면서 적용된다.
- skewX(각도deg)
: 특정 크기만큼 x축으로 비튼다.
- skewY(각도deg)
: 특정 크기만큼 y축으로 비튼다.
- rotate(angleZ)
: 특정 각도만큼 회전한다.
마찬가지로 단위는 deg을 사용한다. transform-origin
transform-origin은 중심축을 변환하는 속성으로
transform으로 태그가 변형되는 기본 중심축은 박스의 가로 세로 중앙이다.
이때 중심축을 옮기고 싶다면 transform-origin을 사용할 수 있다.
transform-origin은 x축, y축, z축을 각각 지점을 지정하여 축을 옮길 수 있고
단위는 px이나 %나 정해진 키워드를 사용하여 옮길 수 있다.[기본형]
transform-origin
: x축 y축 z축;
- x축 : px, %(백분율), left, center, right
- y축 : px, %(백분율), top, center, bottom
- z축 : px, %처럼 길이값만 사용가능하다.
Hi