CSS3의 2D 변형이란 무엇입니까?

CSS3의 2D 변형에는 다음이 포함됩니다. 1. 변위 변환:translate(); 스케일링 변환:scale(); 3. 회전 변환:rotate();

환경:

이 문서는 모든 브랜드의 컴퓨터에 적용됩니다.

(학습 영상 공유: css 영상 튜토리얼)

2d 변환은

1로 나뉩니다. 변위:

transform:translate(매개변수 1, 매개변수 2)

매개변수 1: X에서 이동한 거리 axis

매개변수 2: Y축을 기준으로 이동한 거리

매개변수 설정:

양수 값인 경우: X축이 오른쪽으로 이동하고 음수인 경우 Y축이 아래로 이동합니다. : X축은 왼쪽으로 가고 Y축은 위로

예:

X축/Y축 변위를 별도로 설정할 수도 있습니다:

transform:translateX(parameter); X축 방향으로

transform:translateY(매개변수); Y축 방향 변위에 따라

2. 크기 조정:

transform:scale(매개변수 1, 매개변수 2); 축 배율 비율

매개변수 2: Y축 배율 비율

(0 - 0.999999 사이는 축소, 1보다 크면 확대, 1과 같으면 1배의 크기가 변경되지 않음을 의미)

참고: 두 개가 매개변수가 동일하면 하나의 매개변수만 쓸 수 있습니다.

X축/Y축의 배율을 별도로 설정할 수도 있습니다.

transform:scaleX(매개변수); X축 방향에 따른 배율

transform:scaleY(매개변수); 축 방향

예:

3. 회전:

transform:rotate(매개변수); (회전 각도 단위: deg)

기본값: 중심점을 중심으로 회전

양수이면 회전 방향은 시계 방향, 매개변수 음수이면 회전 방향은 시계 반대 방향입니다

물론 특정 축을 중심으로 회전을 별도로 설정할 수도 있습니다

변환:rotateX (매개 변수) X를 중심으로 회전 axis

transform:rotateY(매개변수) Y축을 중심으로 회전

예:

4. Tilt:

transform:skew (매개변수 1, 매개변수 2)

If 양수 값: X축 오른쪽, Y축 아래쪽

음수 값의 경우: X축 왼쪽, Y축 위쪽

예외 없이 축에 기울기를 별도로 설정할 수도 있습니다. tilt

transform:skewX(매개변수)　X축 방향으로 기울임

transform:skewY(매개변수)　Y축 방향에 따라 기울임

예:

관련 권장 사항:

CSS 튜토리얼

위 내용은 CSS3의 2D 변형이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!