번역은 CSS3 속성인가요?-프런트엔드 Q&A-php.cn

번역은 CSS3 속성인가요?

WBOY

풀어 주다： 2022-06-23 15:47:42

원래의

2441명이 탐색했습니다.

translate는 CSS3의 새로운 CSS 속성입니다. 번역 속성은 요소의 2D 번역 변환을 정의하는 데 사용됩니다. 이 속성은 종종 변환 속성과 함께 사용되어 요소에 2D 또는 3D 변환을 적용할 수 있습니다. 구문은 "transform:translate(x축 방향의 이동 거리, y축 방향의 이동 거리)"입니다.

번역은 CSS3 속성인가요?

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

translate는 CSS3 속성입니다.

transform 속성은 요소에 2D 또는 3D 변환을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다.

translate(x,y)는 2D 변환을 정의합니다.

구문은 다음과 같습니다.

transform:translate(<translation-value>[, <translation-value>]);

로그인 후 복사

translate() 함수는 요소를 이동할 수 있습니다.

값:

translate([, ])는 X축과 Y축에서 요소를 동시에 이동하는 것을 의미하며, . 두 개의 매개변수를 포함합니다. 두 번째 매개변수가 생략되면 두 번째 매개변수는 0이고, 매개변수가 음수이면 반대 방향으로 이동한다는 의미입니다.

translateX(); 요소를 X축(수평 방향)으로만 이동하는 것을 의미합니다.

translateY(); 요소를 Y축(세로 방향)으로만 이동하는 것을 의미합니다.

translateZ(); 요소 자체 또는 요소의 상위 요소에 원근 값이 설정된 경우 Z축에서만 요소를 이동하는 것을 의미합니다.

예제는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: translate(50px,100px); /* IE 9 */
  transform: translate(50px,100px); /* 标准语法 */
}
</style>
</head>
<body>
<h1>translate() 方法</h1>
<p>translate() 方法从元素当前位置对其进行移动：</p>
<div>
该 div 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素。
</div>
</body>
</html>

로그인 후 복사

출력 결과:

번역은 CSS3 속성인가요?