[Web/CSS] CSS - 변형 함수

✏️ transform과 변형 함수

CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성 해야 함

기본형  => transform: 함수

 

✏️ 2차원 변형 함수

종류	설명
translate(tx,ty)	지정한 크기만큼 x축, y축으로 이동
translateX(tx)	지정한 크기만큼 x축으로 이동
translateY(ty)	지정한 크기만큼 y축으로 이동
scale(sx,sy)	지정한 크기만큼 x축, y축으로 확대.축소
scaleX(sx)	지정한 크기만큼 x축으로 확대.축소
scaleY(sy)	지정한 크기만큼 y축으로 확대.축소
rotate(각도)	지정한 각도만큼 회전
skew(ax,ay)	지정한 크기만큼 x축, y축으로 왜곡
skewX(ax)	지정한 크기만큼 x축으로 왜곡
skewY(ay)	지정한 크기만큼 y축으로 왜곡

✏️ 3차원 변형 함수

종류	설명
translate3d(tx,ty,tz)	지정한 크기만큼 x축, y축, z축으로 이동
trnaslateZ(tz)	지정한 크기만큼 z축으로 이동
scale3d(sx,sy,sz)	지정한 크기만큼 x축, y축, z축으로 확대.축소
scaleZ(sz)	지정한 크기만큼 z축으로 확대.축소
rotate(rx, ry, 각도)	지정한 각도만큼 회전
rotate3d(rx, ry, rz, 각도)	지정한 각도만큼 회전
rotateX(rx)	지정한 각도만큼 x축으로 회전
rotateY(ry)	지정한 각도만큼 y축으로 회전
rotateZ(rz)	지정한 각도만큼 z축으로 회전
perspective(길이)	입체적으로 보일 수 있도록 깊잇값 지정

✏️ 웹 요소를 이동시키는 translate()함수

x축이나 y축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동

종류	설명
transform: translate(tx,ty)	x축으로 tx만큼, y축으로 ty만큼 이동 만약 ty값이 주어지지 않으면 0으로 간주
transform: translate(tx,ty,tz)	x축으로 tx만큼, y축으로 ty만큼, z축(앞뒤)으로 tz만큼 이동
transform: translateX(tx)	x축으로 tx만큼 이동
transform: translateY(ty)	y축으로 ty만큼 이동
transform: translateZ(tz)	z축으로 tz만큼 이동

✏️ 요소를 확대.축소하는 scale()함수

웹 요소를 지정한 크기만큼 확대하거나 축소, 괄호 안의 값이 1보다 크면 확대를 하고 1보다 작으면 축소시킴

종류	설명
transform : scale(sx,sy)	x축으로 sx만큼, y축으로 sy만큼 확대 값이 하나뿐인 경우에는 x와 y에 같은 값을 적용
transform : scale3d(sx,sy,sz)	x축으로 sx만큼, y축으로 sy만큼, z축으로 sz만큼 확대
transform : scaleX(sx)	x축으로 sx만큼 확대
transform : scaleY(sy)	y축으로 sy만큼 확대
transform : scaleZ(sz)	z축으로 sz만큼 확대

✏️ 요소를 회전시키는 roate()함수

2차원 회전과 3차원 회전에서 모두 사용 가능 / 각도의 단위로는 라디안 또는 기본 각도를 사용

종류	설명
transform: roate(rx,ry,각도)	x축과 y축을 기준으로 지정한 각도만큼 회전
transform: roate3d(rx,ry,rz)	x축과 y축 그리고 z축을 기준으로 지정한 각도만큼 회전
transform: rotateX(각도)	x축을 기준으로 지정한 각도만큼 회전
transform: rotateY(각도)	y축을 기준으로 지정한 각도만큼 회전
transform: rotateZ(각도)	z축을 기준으로 지정한 각도만큼 회전

✏️ 요소를 비틀어 왜곡하는 skew(함수)

지정한 각도만큼 요소를 비틀어 왜곡하며 양쪽 방향 또는 한 쪽 방향으로 비틀 수 있음

종류	설명
transform: skew(x각도, y각도)	첫 번째 값은 x축을 기준으로 비트는 각도 두 번째 값은 y축을 기준으로 비트는 각도 두 번째 값이 주어지지 않으면 0으로 간주
transform: skewX(x각도)	x축을 기준으로 주어진 각도만큼 비틈
transform: skewY(y각도)	y축을 기준으로 주어진 각도만큼 비틈