CSS에서 왜곡이란 무엇을 의미합니까?

skew는 "기울어짐"을 의미하며 요소의 기울어짐 변환을 위해 변환 속성과 함께 사용해야 하는 CSS에 내장된 함수입니다. CSS에는 세 가지 유형의 기울이기가 있습니다. X 및 Y축을 따른 "skew(x-angle,y-angle)" 기울기 변환, "skewX(angle)" 또는 "skewY(angle)"입니다.

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

skew는 "기울어짐"을 의미하며 요소의 기울어짐 변환을 위해 변환 속성과 함께 사용해야 하는 CSS에 내장된 함수입니다.

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

skew()에는 3가지 종류가 있습니다.

• skew(x-angle,y-angle) X축과 Y축을 따라 2D Skew 변환을 정의합니다.

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

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

skewX()

요소를 기울입니다. 각도가 채워집니다. 아래 ↓에서는 요소가 기울어져도 높이가 변하지 않는 것을 볼 수 있습니다. 똑똑하다면 높이가 변하지 않고 그대로 유지된다는 사실을 확실히 알 수 있을 것입니다. 이는 Y축이 늘어남을 의미합니다.

스케일과 비슷하게 축의 스케일이 달라집니다. → scale

skew

은 Skewx와 Skewy의 합성어인데 차이점이 있습니다.

단일 매개변수를 사용하면 Skewx와 Skewy만 사용하는 것과 같은 효과가 있습니다

하지만! 두 개의 매개변수를 동시에 사용하는 경우, Skewx와 Skewy를 동시에 사용하는 것과 약간의 차이가 있습니다.

그렇다면 왜 이런 차이가 발생하는 걸까요? 사실 이유는 매우 간단합니다.skewX(40deg),skewY(40deg)의 실행 순서는 먼저 X축을 기준으로 40deg를 기울인 다음 Y축을 기준으로 40deg를 기울이는 것입니다. 이렇지 않습니다. 동시에 작동하므로 결과가 약간 다릅니다.

학습 동영상 추천: css 동영상 튜토리얼

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