CSS에서 번역이란 무엇을 의미합니까?

translate는 "이동"을 의미하며 CSS에 내장된 기능으로 변환 속성과 함께 사용되며 가로 방향(X축)과 세로 방향(Y축)을 따라 요소를 이동할 수 있습니다. 번역의 사용은 세 가지 상황으로 나뉩니다. 1. "translateX(x)", 요소가 수평 방향으로만 이동합니다. 2. "translateY(y)", 요소가 수직 방향으로만 이동합니다. (x,y) ”, 요소는 수평 및 수직으로 모두 이동합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

translate은 이동, 번역, 변위를 의미합니다.

CSS 변환: 변환

CSS에서는 변환() 메서드를 변환 속성과 함께 사용하여 가로 방향(X축)과 세로 방향(Y축)을 따라 요소를 이동합니다.

변위 번역() 방법의 경우 이를 3가지 상황으로 나눕니다.

• translateX(x): 요소가 수평 방향으로만 이동합니다(X축 이동).

• translateY(y): 요소는 수직 방향으로만 이동합니다. 방향 이동(Y축 이동)

• transklate(x,y): 요소는 수평 및 수직 방향으로 동시에 이동합니다(X축과 Y축이 동시에 이동).

여기서:

• x는 요소를 나타냅니다. 수평 방향(X축)의 이동 거리 x가 양수이면 요소가 수평 방향(양의 X축 방향)으로 오른쪽으로 이동한다는 의미입니다. ), x가 음수이면 요소가 수평 방향(음의 X축 방향)으로 왼쪽으로 이동한다는 의미입니다.

• y는 요소의 가로 방향(y축) 이동 거리를 나타내며, y가 양수이면 요소가 세로 방향으로 아래로 이동한다는 의미이고, 음수이면 요소가 이동한다는 의미입니다. 수직 방향으로 위쪽으로.

• W3C 규정에서는 위에서 아래로 읽는 인간의 습관으로 인해 선택한 좌표계에서 x축의 양의 방향은 오른쪽이고 y축의 양의 방향은 아래쪽입니다.

• CSS3에서는 모든 변환 방법이 변환 속성에 속하므로 "변환" 처리를 나타내기 위해 모든 변환 방법 앞에 "transform:"이 와야 합니다. 모두가 이것을 기억해야 합니다.

• 단위는 px, em, 퍼센트 등입니다. x와 y가 퍼센트인 경우 이동된 요소의 너비 + 패딩, 높이 + 패딩과 동일합니다.

1.translate(x, y): 2D 모바일 변환 정의

x는 첫 번째 전환 값 매개변수이고 y는 두 번째 전환 값 매개변수 옵션입니다. 제공되지 않으면 ty의 값은 0입니다. 즉, 이동(x,y)은 설정된 x, y 매개변수 값에 따라 개체가 이동한다는 의미입니다. 요소의 중심점은 변환 원점을 기반으로 할 수도 있습니다.

예:

transform:translate(50px,50px):

2.translate(x): Y축 방향으로 이동 지정

예:

transform:translateX(50px):

예: 요소가 웹페이지 중앙에 위치합니다.

코드:

transform:translateY(50px):

(동영상 공유 학습:

web front-end )

위 내용은 CSS에서 번역이란 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!