CSS3의 번역 속성에 대한 자세한 소개

translate 속성은 요소를 현재 위치에서 지정된 위치로 이동할 수 있는 속성입니다. 아래에서 자세히 소개하겠습니다.

translate() 메소드를 통해 요소는 주어진 left(x 좌표) 및 top(y 좌표) 위치 매개변수에 따라 현재 위치에서 이동됩니다.

값 변환(50px,100px) 이동 왼쪽의 요소를 옆으로 50픽셀, 위쪽에서 100픽셀 이동합니다.

rotate() 메서드

rotate() 메서드를 통해 요소는 주어진 각도만큼 시계 방향으로 회전됩니다. 음수 값이 허용되며 요소는 시계 반대 방향으로 회전됩니다.

rotate(30deg) 값은 요소를 시계 방향으로 30도 회전합니다.

scale() 메서드

scale() 메서드를 사용하면 지정된 너비(X축) 및 높이(Y축) 매개변수에 따라 요소의 크기가 증가하거나 감소합니다.

값 scale(2, 4) 너비를 원래 크기의 2배로, 높이를 원래 높이의 4배로 변환합니다.

skew() 메서드

skew() 메서드를 사용하면 지정된 가로선(X축) 및 세로선(Y축) 매개변수에 따라 요소가 지정된 각도만큼 뒤집힙니다.

값skew(30deg, 20deg) 축은 Y축을 기준으로 요소를 30도, 20도 뒤집습니다.

matrix() 메서드

matrix() 메서드는 모든 2D 변환 메서드를 결합합니다.

matrix() 메서드는 6개의 매개변수를 사용하며 요소 회전, 크기 조정, 이동 및 기울이기를 수행할 수 있는 수학적 함수를 포함합니다.

새 변환 속성

아래 표에는 모든 변환 속성이 ​​나열되어 있습니다.

transform은 요소에 2D 또는 3D 변환을 적용합니다.

transform-origin을 사용하면 변환된 요소의 위치를 ​​변경할 수 있습니다.

2D 변환 방법

matrix(n,n,n,n,n,n)은 6개 값의 행렬을 사용하여 2D 변환을 정의합니다.

translate(x,y)는 X 및 Y축을 따라 요소를 이동하는 2D 변환을 정의합니다.

translateX(n)은 X축을 따라 요소를 이동하는 2D 변환을 정의합니다.

translateY(n)은 Y축을 따라 요소를 이동하는 2D 변환을 정의합니다.

scale(x,y)는 요소의 너비와 높이를 변경하는 2D 크기 조정 변환을 정의합니다.

scaleX(n)은 요소의 너비를 변경하는 2D 스케일링 변환을 정의합니다.

scaleY(n)은 요소의 높이를 변경하는 2D 크기 조정 변환을 정의합니다.

rotate(angle)은 매개변수에 각도를 지정하여 2D 회전을 정의합니다.

skew(x-angle,y-angle)는 X 및 Y축을 따라 2D 기울이기 변환을 정의합니다.

skewX(angle)은 X축을 따라 2D 기울이기 변환을 정의합니다.

skewY(angle)은 Y축을 따라 2D 기울이기 변환을 정의합니다.

소개를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 자료:

Css3에서 변환 속성 사용에 대한 튜토리얼

Css3의 border-image 속성에 대한 자세한 소개

Css3 글꼴로 불꽃 효과를 얻는 단계

위 내용은 CSS3의 번역 속성에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!