8. 변형 효과 속성
① 어떤 요소에 위치 이동, 회전, 확대, 축소, 기울이기와 같은 효과를 지정해 변형하는 속성입니다.
② transform 속성을 사용하며 속성값에 변형 효과를 나타내는 함수를 지정합니다.
|
함수 |
설명 |
|
translate(x, y) |
요소를 현재 위치에서 x와 y만큼 이동합니다. |
|
translateX(n) |
요소를 현재 위치에서 n만큼 x축으로 이동합니다. |
|
translateY(n) |
요소를 현재 위치에서 n만큼 y축으로 이동합니다. |
|
scale(x, y) |
요소를 x와 y만큼 확대 또는 축소합니다. |
|
scaleX(n) |
요소를 n만큼 x축으로 확대 또는 축소합니다. |
|
scaleY(n) |
요소를 n만큼 y축으로 확대 또는 축소합니다. |
|
skew(xdeg, ydeg) |
요소를 x축과 y축으로 xdeg, ydeg(각도)만큼 기울입니다. |
|
skewX(deg) |
요소를 deg(각도)만큼 x축 방향으로 기울입니다. |
|
skewY(deg) |
요소를 주어진 deg(각도)만큼 y축 방향으로 기울입니다. |
|
rotate(deg) |
요소를 deg(각도)만큼 회전합니다. |
③ 변형 효과의 기준점을 변경할 때는 transform-origin 속성을 사용합니다.