CSS에서 2D 변환 함수를 사용하는 방법

Tiffany의 새 책 "CSS Master, Second Edition"에서 발췌 CSS 변환 기능은 다른 방법을 달성 할 수없는 효과와 상호 작용을 만들 수있는 능력을 제공합니다. 전환과 애니메이션을 결합하여 회전, 춤 및 규모의 요소와 인터페이스를 만들 수 있습니다. 특히 3 차원 변형으로 물리적 물체를 시뮬레이션 할 수 있습니다. 이 기사는 2 차원 변환 기능을 탐색 할 것입니다 (3 차원 함수는 여기에 소개됩니다).

주로 회전, 스케일링, 기울기 및 변위의 4 가지 유형의 2 차원 변환 기능이 있습니다. 6 가지 다른 기능은 단일 차원을 따라 요소를 변환 할 수 있습니다.

키 포인트

CSS의 4 가지 주요 2 차원 변환 기능은 회전, 스케일, 스 태우 및 번역입니다. 이러한 기능을 통해 회전, 춤 및 규모의 요소 및 인터페이스를 포함하여 다른 방법으로 달성 할 수없는 효과와 상호 작용을 만들 수 있습니다.

rotate () 함수는 변환-오리핀 주위에 지정된 각도로 요소를 회전시킵니다. 시계 방향 또는 시계 반대 방향으로 회전 할 수 있습니다. 스케일 함수는 X 차원, Y 차원 또는 둘 다에서 요소의 크기를 증가 시키거나 감소시킬 수 있습니다. 번역 기능은 요소의 도면 위치와 지정된 거리에 의한 레이아웃 위치 사이의 거리입니다.

변환 기능을 결합하여보다 복잡한 변환을 생성 할 수 있습니다. 그러나 이러한 기능이 적용되는 순서는 결과가 크게 변경되기 때문에 중요합니다. 이는 브라우저가 새 행렬을 생성하여 각 함수의 행렬을 곱하기 때문입니다.

CSS 변환 사양의 최신 버전은 CSS에 변환, 회전 및 스케일 속성을 추가합니다. 이러한 특성은 해당 변환 기능과 매우 유사하게 작동하지만 값은 쉼표로 구분 된 대신 공간 분리됩니다. 이를 통해 회전, 번역 또는 스케일링 변환을 다른 변환에서 개별적으로 관리 할 수 ​​있습니다. 그러나 이러한 속성에 대한 브라우저 지원은 여전히 ​​제한적입니다.

회전 () 회전 변환은 변환-오리핀 주위의 요소를 지정된 각도로 회전시킵니다. 회전 ()을 사용하여 요소를 시계 방향으로 기울여 (양수 각도 값) 또는 시계 반대 방향 (음의 각도 값)을 기울입니다. 그 효과는 아래에 표시된 것처럼 풍차 또는 풍선 휠과 매우 유사합니다.
rotate () 함수는 각도 단위의 값을 허용합니다. 각도 단위는 CSS 값과 단위 모듈 레벨 3에 의해 정의됩니다. 이들은 DEG (도), RAD (Radian), Grad (Gradient) 또는 회전 단위 일 수 있습니다. 전체 회전은 360deg, 6.28rad, 400grad 또는 1Turn과 같습니다.
• 애니메이션 또는 전환이 아닌 한, 회전 값은 하나의 회전 (예 : 540deg 또는 1.5 턴)을 초과합니다. 나머지 값에 따라 렌더링됩니다. 다시 말해, 540deg의 렌더링 효과는 180deg (540도에서 360도)의 렌더링 효과와 동일하며 1.5 턴의 렌더링 효과는 .5 턴 (1.5 - 1)의 렌더링 효과와 동일합니다. 그러나 0DEG에서 540DEG 또는 1 회전에서 1.5 회전으로 전환 또는 애니메이션이 요소를 1.5 회 회전시킵니다.
2 차원 스케일링 함수 : Scale, Scalex 및 Scaley 스케일링 함수를 사용하여 X Dimension (scalex), y 차원 (scaley) 또는 둘 다 (scale)에서 요소의 렌더링 크기를 늘리거나 줄일 수 있습니다. 스케일링은 아래 그림에 나와 있으며, 여기서 테두리는 상자의 원래 경계를 나타내고 숫자는 그 중심점을 나타냅니다.

각 스케일링 함수는 매개 변수로 승수 또는 계수를 허용합니다. 이 승수는 거의 모든 양 또는 음수 일 수 있습니다. 백분율 값은 지원되지 않습니다. 1보다 큰 양의 승수는 요소의 크기를 증가시킵니다. 예를 들어, 스케일 (1.5)은 X 및 Y 방향의 요소의 크기를 1.5 배 씩 증가시킵니다. 0과 1 사이의 양의 승수는 요소의 크기를 줄입니다.

0보다 작은 값은 요소의 크기가 스케일 또는 감소하고 반사 (플립) 변환을 만듭니다.
경고 : scale (0)을 사용하면 숫자를 0으로 곱한 결과가 0이기 때문에 요소가 사라집니다.

스케일 (1)을 사용하여 ID 변환을 생성합니다. 즉, 스케일링 변환이 적용되지 않은 것처럼 화면에 그려집니다. 스케일 (-1)을 사용하면 요소의 드로우 크기가 변경되지 않지만 음수 값은 요소가 반영됩니다. 요소가 변환을 표시하지 않더라도 여전히 새로운 스택 컨텍스트를 트리거하고 블록을 포함합니다. 스케일 함수를 사용하여 각각 x 및 y 치수를 확장 할 수 있습니다. 스케일 (1.5, 2)의 두 매개 변수를 전달하십시오. 첫 번째 매개 변수는 X 차원을 스케일링합니다. 예를 들어, 스케일 (-1, 1)을 사용하여 x 축을 따라 개별적으로 객체를 반사 할 수 있습니다. 단일 매개 변수를 전달하면 동일한 요인으로 두 가지 차원을 확장합니다.

2 차원 번역 함수 : TranslateX, Translatey 및 Translate 번역 요소는 드로잉 위치와 레이아웃 위치 사이의 거리를 지정된 거리로 오프셋합니다. 다른 변환과 마찬가지로 번역 요소는 오프셋 리프트 또는 오프셋 탑 위치를 변경하지 않습니다. 그러나 화면에서 시각적 위치에 영향을 미칩니다. 각 2 차원 번역 함수 (TranslateX, Translatey 및 Translate)는 길이 또는 백분율을 매개 변수로 수락합니다. 길이 단위에는 픽셀 (PX), EM, REM 및 뷰포트 장치 (VW 및 VH)가 포함됩니다.

translatex 함수는 요소의 수평 렌더링 위치를 변경합니다. 요소가 왼쪽에서 0 픽셀 인 경우 변환 : TransitionX (50px)는 렌더링 위치 50 픽셀을 시작 위치 오른쪽으로 이동합니다. 마찬가지로, Translatey는 요소의 수직 렌더링 위치를 변경합니다. Transitiony (50px)는 요소를 수직으로 50 픽셀로 이동시킵니다. translate ()를 사용하여 단일 함수를 사용하여 요소를 수직 및 수평으로 이동할 수 있습니다. 최대 두 가지 매개 변수의 x 번역 값과 y 번역 값을 허용합니다. 아래 그림은 번역 (120%, -50px) 변환 값이있는 요소의 효과를 보여줍니다. 여기서 왼쪽의 녹색 정사각은 원래 위치에 있고 오른쪽의 녹색 정사각형은 요소와 함께 120%로 수평으로 번역됩니다. (파선) 및 수직으로 -50px로 번역.

번역 할 단일 매개 변수를 전달하는 것은 번역 값을 사용하는 것과 같습니다. Translate () 사용은보다 간결한 선택입니다. Translate (100px, 200px)의 적용은 TranslateX (100px) Translatey (200px)와 동일합니다. 양의 번역 값은 요소를 오른쪽으로 이동합니다 (Translatex의 경우) 또는 아래쪽 (Translatey의 경우). 음수 값은 요소를 왼쪽 (TranslateX) 또는 UP (Translatey)로 이동합니다.

패닝은 품목을 왼쪽, 오른쪽, 위 또는 아래로 옮기는 데 특히 유용합니다. 왼쪽, 오른쪽, 상단 및 하단 속성의 값을 업데이트하면 브라우저가 전체 문서의 레이아웃 정보를 다시 계산해야합니다. 그러나 레이아웃

가 계산 된 후 변환이 계산됩니다. 화면에서 요소

디스플레이의 위치에 영향을 미치지 만 실제 크기는 아닙니다. 그렇습니다. 문서 레이아웃과 렌더링을 별도의 개념으로 생각하는 것은 이상하지만 브라우저 측면에서는 실제로 별도입니다.

변환 속성은 가까운 브라우저에 나타날 수 있습니다 CSS 변환 사양의 최신 버전은 CSS에 변환, 회전 및 스케일 속성을 추가합니다. 변환 속성은 해당 변환 함수와 매우 유사하게 작동하지만 값은 쉼표로 구분하지 않고 공간 분리됩니다. 예를 들어, 변환을 표현할 수 있습니다 : rotate3d (1, 1, 1, 45deg) : 회전 : 1 1 45deg. 마찬가지로, 번역 : 15% 10% 300px는 Transform : Translate3d (15%, 10%, 300px) 및 스케일 : 1.5 1.5 3은 변환과 동일합니다 : scale3d (1.5, 1.5, 3). 이러한 특성을 사용하여 다른 사람보다는 회전, 번역 또는 스케일링 변환을 개별적으로 관리 할 수 ​​있습니다. 작성 당시 변환 속성에 대한 브라우저 지원은 여전히 ​​매우 드문입니다. 크롬과 삼성 인터넷은 상자 밖으로 그들을 지원합니다. Firefox 60 이상에서는 지원에 대한 지원이 숨겨져 있습니다. skew, skewx 및 skewy 틸트 변환은 동일한 평면에 유지하면서 점 사이의 각도와 거리를 변경합니다. 경사 변환은 전단 변환

라고도하며, 아래에 표시된 것처럼 요소의 모양을 왜곡하는데, 여기서 점선은 요소의 원래 경계 상자를 나타냅니다.
틸트 함수 (SKEW, SKEWX 및 SKEWY)는 대부분의 각도를 매개 변수로 수용합니다. 정도, 그라디언트 및 라디안은 틸트 기능에 대한 유효 각도 단위이며 턴 장치 (아마도 명백히)는 그렇지 않습니다.

skewx 함수는 x 방향 또는 수평 방향으로 요소를 자릅니다 (아래 그림 참조). 각도 유닛이어야하는 매개 변수를 허용합니다. 양수 값은 요소를 왼쪽으로 이동시키고 음수 값은 요소를 오른쪽으로 이동시킵니다. 마찬가지로, Skewy는 요소를 Y 방향 또는 수직 방향으로 자릅니다. 다음 그림은 변환의 효과를 보여줍니다 : Skewy (30deg). 원산지의 오른쪽에있는 지점은 양수 값이 증가함에 따라 아래쪽으로 이동합니다. 음수 값은이 점이 위로 올라갑니다.

이것은 왜곡 함수로 이어집니다. SKEW 함수에는 하나의 매개 변수가 필요하지만 최대 두 개의 매개 변수를 수용 할 수 있습니다. 첫 번째 매개 변수는 요소를 X 방향으로 기울이고 두 번째 매개 변수는 요소를 y 방향으로 기울입니다. 하나의 매개 변수 만 제공되면, 두 번째 값은 0이라고 가정하여 X 방향으로 만 기울이는 것과 동일합니다. 다시 말해, Skew (45deg)의 렌더링 효과는 Skewx (45deg)와 동일합니다.

전류 변환 매트릭스 지금까지 우리는 변환 기능을 개별적으로 논의했지만 결합 할 수도 있습니다. 객체를 확장하고 회전하고 싶습니까? 문제 없음 : 변환 목록을 사용하십시오. 예를 들면 :

이것은 아래에 표시된 결과를 생성합니다.

변환 함수를 사용할 때 시퀀스가 ​​중요합니다. 이것은 삽화로 가장 잘 설명되어 있으므로 예를 살펴 보겠습니다. 다음 CSS는 요소를 기울여 회전합니다.

아래 그림과 같이 결과를 제공합니다.

요소를 먼저 회전시킨 다음 기울이면 어떻게됩니까?

<code>.rotatescale {
    transform: rotate(45deg) scale(2);
}</code>

효과 (아래 그림과 같이)는 매우 다릅니다.

각 변환에는 변환 함수의 순서대로 생성 된

전류 변환 매트릭스

가 다릅니다. 그 이유를 완전히 이해하려면 행렬 곱셈 를 배워야합니다. 이것은 또한 Matrix 및 Matrix3D 기능을 이해하는 데 도움이됩니다.

행렬 곱셈 및 행렬 함수 행렬은 사각형의 행과 열로 배열 된 숫자 또는 표현식입니다. 모든 변환은 아래와 같이 4 × 4 행렬을 사용하여 표현할 수 있습니다.

<code>.transformEl {
    transform: skew(10deg, 15deg) rotate(45deg);
}</code>

이 행렬은 16 개의 매개 변수를 허용하는 Matrix3d ​​함수에 해당하며, 각 매개 변수는 4 × 4 행렬의 값에 해당합니다. 2 차원 변환은 아래 그림과 같이 3 × 3 행렬을 사용하여 표현할 수 있습니다.

이 3 × 3 행렬은 행렬 변환 함수에 해당합니다. matrix () 함수는 6 개의 매개 변수를 허용하며, 각 매개 변수는 ~ f 에 해당합니다.

각 변환 함수는 행렬 및 행렬 또는 matrix3d ​​함수를 사용하여 설명 할 수 있습니다. 아래 그림은 scale3d 함수의 4 × 4 행렬을 보여줍니다. 차원 각각.

변환 (예 : 변환 : scale (2) translate (30px, 50px))를 결합하면 브라우저는 새 행렬을 생성하여 각 함수의 행렬을 곱합니다. 이 새로운 매트릭스는 요소에 적용되는 행렬입니다. 그러나 매트릭스 곱셈은 다음과 같습니다. 상호 교환 할 수 없습니다. 간단한 값의 경우 3 × 2의 제품은 2 × 3의 제품과 동일합니다. 그러나 매트릭스의 경우 의 생성물이 반드시 b 의 곱과 동일 할 필요는 없습니다. 예를 살펴 보겠습니다. 변환 (2) 번역 (30px, 50px)의 매트릭스 제품을 계산합니다. 우리의 요소는 두 배의 스케일로 스케일링 된 다음 60 픽셀을 가로로 번역하고 100 픽셀을 수직으로 번역했습니다. 또한 매트릭스 함수를 사용 하여이 제품을 나타낼 수 있습니다 : 변환 : 매트릭스 (2, 0, 0, 2, 60, 100). 이제 이러한 변환의 순서, 즉 변환 : 변환 (30px, 50px) 척도 (2)를 전환하겠습니다. 결과는 아래에 나와 있습니다. > 우리의 물체는 여전히 두 배의 스케일링이 스케일링되었지만 여기서는 30 픽셀로 수평으로, 50 픽셀로 수평으로 팬을 팬화합니다. 매트릭스 함수를 사용하여 이것은 변환입니다 : 행렬 (2, 0, 0, 2, 30, 50).

상속 변환 함수는 변환 목록과 유사하다는 점도 주목할 가치가 있습니다. 각 어린이 변환에는 부모에게 적용되는 모든 변환이 곱합니다. 예를 들어 다음 코드를 고려하십시오

이것은 다음과 같은 렌더링 효과입니다. 두 경우 모두 P 요소의 전류 변환 행렬은 동일합니다. 우리는 지금까지 2 차원 변형에 초점을 맞추고 있지만, 상기는 3 차원 변형에도 적용됩니다. 3 차원은 깊이의 환상을 더합니다. 또한 새로운 기능과 속성의 형태로 약간의 복잡성을 제공합니다.

CSS의 2 차원 변환 기능에 대한 자주 묻는 질문 CSS의 다른 유형의 2 차원 변환 기능은 무엇입니까?

CSS에는 여러 유형의 2 차원 변환 기능이 있습니다. 여기에는 translate (), rotate (), scale (), skew () 및 matrix ()가 포함됩니다. 각 함수를 사용하면 다른 방식으로 요소를 조작 할 수 있습니다. 예를 들어, Translate () 함수는 현재 위치에서 요소를 이동하고 rotate () 함수는 주어진 지점 주위에서 요소를 회전시킵니다. scale () 함수는 요소의 크기를 변경하고 skew () 함수는 x 축과 y 축을 따라 요소를 비틀어줍니다. Matrix () 함수는 이러한 모든 변환을 하나로 결합합니다. CSS에서 Translate () 함수를 사용하는 방법은 무엇입니까?

CSS의 TransLate () 함수는 현재 위치에서 요소를 이동하는 데 사용됩니다. x 축 값과 y 축 값의 두 가지 매개 변수가 있습니다. 예를 들어, 요소 50 픽셀을 오른쪽으로, 20 픽셀을 아래로 이동하려면 다음 코드를 사용할 수 있습니다. 변환 (50px, 20px);. 이것은 페이지의 다른 요소의 레이아웃에 영향을 미치지 않고 요소를 새로운 위치로 이동합니다.

CSS에서 여러 2D 변환 함수를 결합 할 수 있습니까?

예, CSS에서 여러 2D 변환 함수를 결합 할 수 있습니다. 이렇게하려면 변환 속성에 각 함수를 나열하고 공백으로 분리하십시오. 예를 들어, 요소를 크기의 두 배로 확장 한 다음 45도 회전하려면 다음 코드를 사용할 수 있습니다. 변환 (2) 회전 (45deg);. 변환은 나열된 순서로 적용됩니다.

CSS에서 matrix () 함수의 목적은 무엇입니까?

CSS의 Matrix () 함수는 동시에 여러 변환을 수행 할 수있는 매우 강력한 변환 함수입니다. 2 × 3 행렬의 값을 나타내는 6 개의 매개 변수가 있습니다. 이 매트릭스는 스케일링, 회전, 기울기 및 번역 변환의 조합을 수행하는 데 사용됩니다. 다른 변환 함수보다 더 복잡하지만 변환 프로세스에 대한 높은 수준의 제어를 제공합니다.

skew () 함수는 CSS에서 어떻게 작동합니까?

CSS의 Skew () 함수는 X 축 및 Y 축을 따라 요소를 비틀기 위해 사용됩니다. 여기에는 두 가지 매개 변수가 있습니다. X 축의 경사각과 Y 축의 경사 각도. 예를 들어, 요소를 x 축을 따라 30도, Y 축을 따라 20도 기울이려면 다음 코드를 사용할 수 있습니다. 변환 (30deg, 20deg);. 이것은 요소를 왜곡하여 틸트 효과를 만듭니다.

CSS의 HTML 요소에 2D 변환 기능을 사용할 수 있습니까?

예, CSS의 모든 HTML 요소에 2D 변환 기능을 사용할 수 있습니다. 여기에는 블록 레벨 요소 (예 : DIV) 및 인라인 요소 (예 : SPAN)가 포함됩니다. 그러나 변환이 적용되는 방식은 요소 유형과 레이아웃의 위치에 따라 다를 수 있습니다.

CSS에서 Translate () 함수의 단위를 지정하지 않으면 어떻게됩니까?

CSS에서 Trranslate () 함수의 단위를 지정하지 않으면 이러한 값은 픽셀 값으로 취급됩니다. 이것은 변환을 의미한다 : 번역 (50, 20); 그러나 일반적으로 명확성과 일관성을 보장하기 위해 항상 단위를 지정하는 것이 가장 좋습니다.

CSS의 2D 변환을 애니메이션하는 방법은 무엇입니까?

전환 속성을 사용하여 CSS의 2D 변환을 애니메이션 할 수 있습니다. 이 속성을 사용하면 지속 시간, 타이밍 기능 및 전환 지연을 지정할 수 있습니다. 예를 들어, 2 초 안에 회전을 애니메이션하려면 다음 코드를 사용할 수 있습니다. Transform : Transform : 회전 (45deg); 이것은 지정된 기간 동안 회전을 원활하게 애니메이션합니다.

CSS의 rotate ()와 skew () 함수의 차이점은 무엇입니까?

CSS의 rotate () 및 skew () 함수는 다른 방식으로 요소에서 작동합니다. 회전 () 함수는 주어진 지점 주위의 요소를 회전시키는 반면 skew () 함수는 x 및 y 축을 따라 요소를 비틀어줍니다. 이는 Rotate ()가 요소의 방향을 변경하고 Skew ()가 요소의 모양을 변경 함을 의미합니다.

CSS의 다른 CSS 속성과 함께 2D 변환 함수를 사용할 수 있습니까?

예, 다른 CSS 속성과 함께 CSS에서 2D 변환 함수를 사용할 수 있습니다. 예를 들어, Border-Radius 속성과 함께 변형 속성을 사용하여 둥근 모서리가있는 회전 요소를 만들 수 있습니다. 그러나 속성이 적용되는 순서는 최종 결과에 영향을 미칩니다.

위 내용은 CSS에서 2D 변환 함수를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!