CSS 2D Transforms

Transforms

CSS 변환을 사용하면 요소를 이동, 회전, 크기 조절 및 기울일 수 있습니다.

2D 회전

 

브라우저 지원

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

 

브라우저 별 접두사

일부 구형 브라우저 (IE 9)는 2D 변환 속성을 이해하기 위해 특정 접두사 (-ms-)가 필요합니다.

div {
  -ms-transform: rotate(20deg); /* IE 9 */
  transform: rotate(20deg); /* Standard syntax */
}

 

CSS 2D 변환 방법

CSS transform속성을 사용하면 다음과 같은 2D 변형 방법을 사용할 수 있습니다.

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

 

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> 요소를 원래 높이의 3 배로 증가시킵니다. 

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);
}