CSS 2D 변환
- 이전 페이지 CSS 네트워크 폰트
- 다음 페이지 CSS 3D 변환
CSS 2D 변환
CSS 변환(transforms)은 요소를 이동, 회전, 확대, 축소 및 기울이는 데 사용할 수 있습니다。
아래 요소에 마우스를 올려 놓으면 2D 변환을 확인할 수 있습니다：
이 장에서는 다음과 같은 CSS 속성을 배웁니다：
transform
브라우저 지원
표에서의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다。
| 속성 | 크롬 | IE | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
CSS 2D 변환 메서드
CSS를 사용하여 transform 속성을 사용하여 다음과 같은 2D 변환 메서드를 활용할 수 있습니다：
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
푸트리플랫다음 장에서는 3D 변환을 배웁니다。
translate() 메서드
translate() X축과 Y축에 지정된 파라미터에 따라 요소를 현재 위치에서 이동하는 방법입니다。
아래 예제에서는 <div> 요소를 현재 위치에서 50픽셀 오른쪽으로 이동하고 100픽셀 아래로 이동합니다：
예제
div {
transform: translate(50px, 100px);
}
rotate() 메서드
rotate() 지정된 각도에 따라 요소를 시계 방향이나 반시계 방향으로 회전하는 방법입니다。
아래 예제에서는 <div> 요소를 시계 방향으로 20도 회전합니다：
예제
div {
transform: rotate(20deg);
}
부정적인 값을 사용하여 요소를 반시계 방향으로 회전합니다。
아래 예제에서는 <div> 요소를 반시계 방향으로 20도 회전합니다：
예제
div {
transform: rotate(-20deg);
}
scale() 메서드
scale() 요소의 크기를 늘리거나 줄이는 방법입니다. (지정된 너비와 높이 파라미터에 따라).
아래 예제에서는 <div> 요소를 원래 너비의 두 배와 높이의 세 배로 확장합니다：
예제
div {
transform: scale(2, 3);
}
아래 예제에서는 <div> 요소를 원래 너비와 높이의 반으로 줄입니다：
예제
div {
transform: scale(0.5, 0.5);
}
scaleX() 메서드
scaleX() 요소의 너비를 늘리거나 줄이는 방법입니다。
아래 예제에서는 <div> 요소를 원래 너비의 두 배로 확장합니다：
예제
div {
transform: scaleX(2);
}
이 예제에서는 <div> 요소를 원래 너비의 반으로 축소합니다：
예제
div {
transform: scaleX(0.5);
}
scaleY() 메서드
scaleY() 메서드는 요소의 높이를 증가하거나 감소시킵니다.
다음 예제는 <div> 요소의 원래 높이를 세 배로 확대합니다:
예제
div {
transform: scaleY(3);
}
다음 예제는 <div> 요소의 원래 높이를 반으로 줄입니다:
예제
div {
transform: scaleY(0.5);
}
skewX() 메서드
skewX() 메서드는 요소가 X축으로 기울어지는 각도를 설정합니다.
다음 예제는 <div> 요소를 X축으로 20도 기울입니다:
예제
div {
transform: skewX(20deg);
}
skewY() 메서드
skewY() 메서드는 요소가 Y축으로 기울어지는 각도를 설정합니다.
다음 예제는 <div> 요소를 Y축으로 20도 기울입니다:
예제
div {
transform: skewY(20deg);
}
skew() 메서드
skew() 메서드는 요소가 X축과 Y축으로 기울어지는 각도를 설정합니다.
다음 예제는 <div> 요소를 X축으로 20도, Y축으로 10도 기울입니다:
예제
div {
transform: skew(20deg, 10deg);
}
두 번째 파라미터가 지정되지 않으면 값은 0입니다. 따라서 다음 예제는 <div> 요소를 X축으로 20도 기울입니다:
예제
div {
transform: skew(20deg);
}
matrix() 메서드
matrix() 메서드는 모든 2D 변환 메서드를 하나로组合합니다.
matrix() 메서드는 수학 함수를 포함한 6개의 파라미터를 받아들이며, 이 파라미터들은 요소를 회전, 확대, 이동(이동) 및 기울이기 할 수 있습니다.
파라미터는 다음과 같습니다: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
예제
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
CSS 변환 속성
아래 표는 모든 2D 변환 속성을 나열합니다:
| 속성 | 설명 |
|---|---|
| transform | 요소에 2D 또는 3D 변환을 적용합니다. |
| transform-origin | 변환된 요소의 위치를 변경할 수 있습니다. |
CSS 2D 변환 메서드
| 함수 | 설명 |
|---|---|
| matrix(n,n,n,n,n,n) | 6개의 값을 가진 행렬을 사용하여 2D 변환 정의합니다. |
| translate(x,y) | 2D 변환 정의, X축과 Y축으로 요소를 이동합니다. |
| translateX(n) | 2D 변환 정의, X축으로 요소를 이동합니다. |
| translateY(n) | 2D 변환 정의, Y축으로 요소를 이동합니다. |
| scale(x,y) | 2D 확대 변환 정의, 요소의 너비와 높이를 변경 |
| scaleX(n) | 2D 확대 변환 정의, 요소의 너비를 변경 |
| scaleY(n) | 2D 확대 변환 정의, 요소의 높이를 변경 |
| rotate(angle) | 2D 회전 변환 정의, 각도를 매개변수로 지정 |
| skew(x-angle,y-angle) | X와 Y 축을 따라 2D 기울기 변환 정의 |
| skewX(angle) | X 축을 따라 2D 기울기 변환 정의 |
| skewY(angle) | Y 축을 따라 2D 기울기 변환 정의 |
- 이전 페이지 CSS 네트워크 폰트
- 다음 페이지 CSS 3D 변환
