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

青灯夜游
풀어 주다: 2021-04-06 15:46:27
원래의
8207명이 탐색했습니다.

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

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

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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿