CSS3 요소의 2D 평면 변환 속성 변환 구현 방법에 대해

CSS3 도형 변환을 통해 Stretch, Scale 등의 작업을 할 수 있습니다.

이 글에서는 주로 2D 평면 변환
속성 trans에 대해 설명하겠습니다. form은 변환 가능
transform은 변환
을 의미하며 주로 함수를 통해 사용됩니다.

• translate 함수는 다음과 같습니다. ( ) 번역 변환

• ratate() 회전 변환

• scale() 스케일 변환

• Skew () 경사 변환

• matrix() 행렬 변환

transform-origin 규칙은 변환의 중심을 정의합니다

번역 변환 변환

translate()에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 x축의 상대 변위이고 두 번째 매개변수는

.demo {    ......
    transform: translate(100px, 200px);  <--
}

입니다. Translate()는 TranslateX() 및 TranslateY()로 분할될 수 있습니다.
(소문자로 된translatex/y도 허용됨)

.demo {    ......
    transform: translateX(100px) translateY(200px); /*改*/}

둘은 동일하지만 매우 번거롭습니다
결과적으로 요소는 오른쪽으로 100px, 아래쪽으로 200px로 변환됩니다

회전 변환 회전

rotate() 하나의 매개변수, 회전 각도를 나타내는 'xxdeg',
양수는 시계 방향으로 회전, 음수 값 ​​

.demo {    ......
    transform: rotate(30deg);}

결과는 요소입니다. 시계 방향으로 30° 회전합니다.
그러나 요소의 기본 회전 중심은 요소의 중심입니다.
변환을 사용할 수 있습니다. 변환 중심을 수정하는 원점 속성
예를 들어 왼쪽 위 꼭지점을 따라 요소를 회전하려고 합니다.

.demo {    ......
    transform: rotate(30deg);    transform-origin: 0 0; /*增*/}

변환 원점의 세 가지 매개 변수는 x축 거리(x축), y입니다. -축 거리(y축), z축 거리(z축)
기본 형식은 transform-origin: 50% 50% 0;입니다.
길이, 백분율 외에 x축에 대한 선택적 값에는 왼쪽, 중심이 포함됩니다. , 오른쪽
길이 및 백분율 외에도 y축에 대한 선택적 값에는 상단과 중앙, 하단
이 포함됩니다. z축 값은 길이 값일 뿐이므로 2D 변환

scale 변환 scale

요소의 크기를 조정하는 것은 요소의 크기를 변경하는 것입니다. 요소의 크기
두 개의 매개변수, 너비 및 높이 배율 비율(단위 없음)
scaleX() 및 scaleY()로 분할할 수도 있습니다

.demo {    ......
    transform: scale(2,2);}

이 방법으로 요소의 너비가 두 배가 됩니다. 높이가 두 배가 됩니다
이것은 실제 크기 조정입니다
요소에 텍스트가 있으면 늘이기 효과가 발생한다는 의미입니다
등가 형식은 다음과 같습니다

.demo {    ......
    transform: scaleX(2) scaleY(3); /*改*/}

변환 원점을 통해 변환 중심을 수정할 수 있습니다

경사 변환 왜곡

기울기는 경사 왜곡을 의미합니다
이 기능은 요소를 선형으로 왜곡합니다
두 개의 매개변수, 왜곡 각도 x축이고 y축도 xxdeg 형식입니다.

.demo {    ......
    transform: skew(10deg,20deg);}

는

.demo {    ......
    transform: skewX(10deg) skewY(20deg); /*改*/}

와 동일합니다. 또한 변환 중심을 변형 원점을 통해 수정할 수도 있는데 이에 대해서는 다시 설명하지 않습니다.

행렬 변환 행렬

은 슈퍼 NB처럼 들리지만 실제로는 NB입니다.

행렬 변환은 거의 사용되지 않으며 위의 모든 변환의 기본입니다
잘 모르겠습니다 Deep
수학을 전공하는 학생으로서 정말 부끄럽습니다T^T
행렬 변환에는 6개의 매개변수가 있으며 요소의 회전, 평행 이동, 기울기 및 크기 조정을 제어할 수 있습니다
예를 들어 다음 코드는 요소를 30° 회전하고 x와 y축은 각각 20px로 변환됩니다.

.demo {    ......
    transform: matrix(0.866,0.5,-0.5,0.866,20,20);}

수학에 관심이 있다면 Zhang Xinxu의 기사 포털을 추천합니다
아마도 그럴 것입니다. 앞으로는 기분 좋게 행렬에 관한 글을 써보세요...

---

오늘 이야기할 내용은 비교적 간단해서 사진은 보여드리지 않겠습니다
3D 변환관련 속성 –>

위 내용은 CSS3 요소의 2D 평면 변환 속성 변환 구현 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!