CSS 2D 변환
CSS 2D 변환
CSS 변환을 사용하면 요소를 이동, 회전, 크기 조정 및 기울일 수 있습니다.
2D 변환을 보려면 아래 요소 위로 마우스를 가져갑니다.
이 장에서는 다음 CSS 속성에 대해 배웁니다.
transform
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Property | |||||
|---|---|---|---|---|---|
| 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()주어진 각도에 따라 요소를 시계 방향 또는 시계 반대 방향으로 회전합니다.
다음 예제에서는 <div> 요소를 시계 방향으로 20도 회전합니다.
예시
div
{
transform: rotate(20deg);
}
음수 값을 사용하면 요소가 시계 반대 방향으로 회전합니다.
다음 예제에서는 <div> 요소를 20도씩 시계 반대 방향으로 회전합니다.
예시
div
{
transform: rotate(-20deg);
}
scale() 메서드
이 scale()방법은 요소의 크기를 늘리거나 줄입니다(너비와 높이에 대해 지정된 매개변수에 따라).
다음 예제에서는 <div> 요소를 원래 너비의 2배, 원래 높이의 3배로 늘립니다.
예시
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> 요소를 원래 높이의 3배로 늘립니다.
예시
div
{
transform: scaleY(3);
}
다음 예제에서는 <div> 요소를 원래 높이의 절반으로 줄입니다.
예시
div
{
transform: scaleY(0.5);
}
SkewX() 메서드
이 skewX()메서드는 지정된 각도만큼 X축을 따라 요소를 기울입니다.
다음 예제에서는 X축을 따라 <div> 요소를 20도 기울이고 있습니다.
예시
div
{
transform: skewX(20deg);
}
skewY() 메서드
이 skewY()메서드는 Y축을 따라 지정된 각도만큼 요소를 기울입니다.
다음 예제에서는 Y축을 따라 <div> 요소를 20도 기울이고 있습니다.
예시
div
{
transform: skewY(20deg);
}
Skew() 메서드
이 skew()방법은 지정된 각도만큼 X 및 Y축을 따라 요소를 기울입니다.
다음 예제에서는 <div> 요소를 X축을 따라 20도, Y축을 따라 10도 기울입니다.
예시
div
{
transform: skew(20deg, 10deg);
}
두 번째 매개변수를 지정하지 않으면 값이 0입니다. 따라서 다음 예제에서는 X축을 따라 <div> 요소를 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 변환 속성이 나열되어 있습니다.
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
CSS 2D 변환 방법
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |