CSS3 스케일은 무엇을 의미합니까?

CSS3에서 스케일은 "스케일링"을 의미하며 지정된 요소에 대해 2D 또는 3D 스케일링 변환을 수행하는 데 사용되는 변환 속성에 사용되는 내장 함수입니다. scale(), scaleX를 포함한 많은 스케일 함수가 있습니다. (), scaleY(), scaleZ(), scale3d().

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

CSS3에서 scale은 "확대/축소"를 의미하며 변환 속성에 사용되는 내장 함수입니다.

transform 속성에는 다양한 scale 함수가 있습니다:

• scale()

• scaleX()

• scaleY()

• scaleZ()

• scale3d()

변경되는 것은 요소의 너비와 높이가 아니라 X와 Y축의 크기입니다.

scaleX(), scaleY()

　 요소의 크기를 조정하고, 확대하려면 >1, 확대하려면 <1 기본값은 1입니다.

위 그림을 보면 100px가 200px이 된 것처럼 느껴지실 수도 있지만 실제로는 그렇지 않습니다. 변경되는 것은 요소의 너비와 높이가 아닙니다.

사실 그가 바꾸는 것은 요소의 너비와 높이가 아니라 x와 y축의 스케일입니다↓

scale()

이것은 다음의 조합입니다. 즉, 첫 번째 매개변수는 x이고 두 번째 매개변수는 y

scale3d()

첫 번째 매개변수는 x 두 번째 매개변수는 y 세 번째 매개변수는 z, 즉 scalex scaley scalez의 조합입니다.

Scalez 이 값은 원래 3D이므로 이해하기 어려울 수 있습니다. 위 그림처럼 원래는 Z축을 아무리 늘려도 효과가 나타나지 않습니다. 전제는 그림이 3D인 경우에만 늘릴 수 있고 2D인 경우에는 늘릴 수 없다는 것입니다. Z축이 어디에 있는지 모르는 친구가 있다면 여기를 클릭하세요 →rotateZ

탐색:

먼저 문제에 대해 생각해 봅시다. 회전을 사용하여 회전한 다음 X와 Y를 사용합니다. 회전에 따라 축이 변경됩니다. 예, 그렇다면 이때 scaleX와 Y를 추가하면 회전 중에 스케일 효과가 있습니까?

먼저 회전의 효과를 관찰한 다음 크기를 조정해 보겠습니다.

위 그림을 읽고 회전하면 크기 조절 효과로 회전할 것이라고 생각하시나요? 하지만! 두 위치를 바꾸면 결과가 완전히 달라집니다. 먼저 크기를 조정한 다음 회전

두 사진을 비교해 보면 첫 번째 사진의 효과가 실제로 크기의 효과라는 것을 알 수 있습니다. 같이 회전하는데 위치가 바뀌면 왜 달라지나요?

실제로 먼저 회전한 다음 크기 조정(회전한 다음 크기 조정)하면 회전 효과가 발생하지만 크기 조정을 먼저 한 다음 회전(먼저 확대한 다음 회전)하면 크기 조정 효과가 회전으로 가져오지 않습니다. 제자리에 머무르고 지나갈 때 적용됩니다. 아래 그림을 보시면 확대된 비율이 그대로 유지되고 지나가면 비율이 복원됩니다.

(학습 영상 공유: css 영상 튜토리얼, 웹 프론트엔드)

위 내용은 CSS3 스케일은 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!