HTML, CSS - Transform 속성

 

TML/CSS에서 transform속성은 요소에 변형을 적용하는 데 사용됩니다.

 

적용할 수 있는 변환 중 하나는 translate()요소를 특정 양만큼 이동하는 것입니다.

 

이 translate()함수의 구문은 다음과 같습니다.

 

transform: translate(x, y);

 

여기서 x는 요소를 수평으로 이동하는 양이고 는 y요소를 수직으로 이동하는 양입니다. x및 값은 y양수 또는 음수일 수 있습니다.

 

예를 들어 다음 CSS는 요소를 오른쪽으로 100픽셀, 아래로 50픽셀 이동합니다.

 

div {
  transform: translate(100px, 50px);
}

 

이 translate()함수는 현재 위치를 기준으로 요소를 이동하는 데에도 사용할 수 있습니다. 이를 위해 속성 translate()과 함께 함수를 사용할 수 있습니다 origin. 속성 origin은 변환의 원점을 지정합니다.

 

속성 origin의 구문은 다음과 같습니다.

 

transform: translate(x, y) origin(x, y);

 

여기서 x및 는 y원점의 좌표입니다. 기본 원점은 요소의 왼쪽 상단입니다.

 

예를 들어 다음 CSS는 요소를 현재 위치를 기준으로 오른쪽으로 100픽셀, 아래로 50픽셀 이동합니다.

 

div {
  transform: translate(100px, 50px) origin(0, 0);
}

이 translate()기능은 페이지에서 요소를 이동하는 데 사용할 수 있는 강력한 도구입니다.

 

슬라이딩 메뉴, 툴팁, 팝업 등 다양한 효과를 만드는 데 사용할 수 있습니다.