6.8.1 transform 속성
transform 속성을 사용하면 요소에 특정 변형 효과를 지정할 수 있습니다. 속성값에는 변형 효과가 정의된 다양한 함수를 사용 목적에 맞게 넣으면 됩니다.
형식
transform:<함수>;
속성값에 사용하는 함수들은 다음과 같습니다.
표 6-26 transform 속성값 사용 함수
|
함수 |
설명 |
|
translate(x, y) |
요소를 현재 위치에서 x(x축)와 y(y축)만큼 이동합니다. |
|
translateX(n) |
요소를 현재 위치에서 n만큼 x축으로 이동합니다. |
|
translateY(n) |
요소를 현재 위치에서 n만큼 y축으로 이동합니다. |
|
scale(x, y) |
요소를 x(x축)와 y(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(각도)만큼 회전합니다. |