의사 요소에 3D 변환을 적용하고(background-image를 설정할 수도 있음) 원래 평면(상위 요소의 평면)에서 평면화되었는지 확인하여 효과를 얻을 수 있습니다. 이는 3D에서 무언가를 회전하려면 상위 개체를 회전해야 함을 의미합니다.

1단계: 정사각형 div를 만들고, 정확히 동일한 크기의 더미 변수(또는 하위 변수)를 추가한 다음 해당 더미 변수에 div，添加一个具有完全相同尺寸的伪变量（或子变量），并在该伪变量上设置 background-image를 설정합니다.

2단계: transform-origin 设置为底部边缘的中间 (100% 50%)에 더미 값을 배치합니다. 이렇게 하면 3D 변환을 적용한 후 아래쪽 가장자리가 제자리에 유지됩니다.

3단계: z 轴应用 3D 倾斜，沿 y축을 따라 가장자리를 확장합니다.

예, CSS에는 3D 기울기 기능이 없습니다. 하지만 회전, 크기 조정, 기울기 및 평행 이동을 표현하는 데 사용할 수 있는 matrix3d()이 있습니다!

먼저 틸트가 어떻게 작동하는지 이해해 봅시다.

축을 따라 기울기가 발생합니다.

2D 틸트 기능의 작동 방식을 보여주는 대화형 데모입니다.

y축이 초기 위치에서 멀어지면서 x축을 따라 기울어지는 이 예를 고려하면 y축을 따르는 가장자리가 길어집니다. 이 각도가 기울기 각도입니다. z 축은 기울고 있는 평면(이 경우 xOy)에 수직이며 영향을 받지 않습니다.

글쎄, 우리의 경우 비슷한 일을 했지만 xOy 평면이 아닌 yOz 평면에서 기울기가 발생했습니다. 왜냐하면 우리는 yOz 평면 >z 축을 따라 기울었기 때문입니다. x 축을 따라요.

우리는 이미 transform-origin를 사용하여 의사 값의 아래쪽 가장자리 중앙을 제자리에 고정했고 이 기울기는 z 축(화면에 수직)을 따라 발생하므로 기본적으로 의사 백을 뒤쪽으로 당기고 있습니다. 화면에서는 한 점의 모든 x 및 y 좌표를 유지하지만 z 좌표를 변경합니다.

기본적으로 부모 평면으로 병합하지 않고 3D로 보면(부모는 윤곽선에 의해 제한됨) 다음과 같습니다.

상단의 수평 안내선은 기울어진 의사 값의 상단이 x 및 y 좌표를 유지하는 방법을 보여줍니다. 이는 바로 z 축을 따릅니다.

좋아요, CSS를 사용하여 어떻게 할까요?

위에서 언급했듯이 3D 기울기는 없지만 변환 행렬을 직접 만들 수 있습니다. 이는 z 축(세 번째 축)을 따라 기울어지고 가장자리가 y 축(두 번째 축)을 따라 늘어나므로 행렬에서 identity 행렬과 동일한 유일한 것은 ( 1，其他地方的 0）将位于第 3 行第 2 行柱子。我们将在那里得到倾斜角的正切。在 MDN 上，您也可以在 skewX() 和 skewY() 주 대각선을 따라) 이 지점

이것은 기울기 축을 따라 있는 모든 점이 길쭉한 축을 따른 좌표와 기울기 각도의 탄젠트를 곱하여 변위되기 때문입니다. 축에 평행한 선을 그리면 첫 번째 그림에서 이를 볼 수 있습니다(x 축 , y 축(앞으로 기울어짐)은 예제 점의 원래 위치(회색)와 최종 위치(검은색)를 통과합니다. 이러한 평행선을 그리면 x 변위에서 y 좌표를 사용하여 직각 삼각형이 생성됩니다. 틸트 각도의 탄젠트입니다

자, 다시 매트릭스로 돌아가면 이렇게 생겼습니다.

단위 행렬에서 동일한 값을 matrix3d() 值，我们再添加一行和一列，与 4x4 얻으려면 값을 열별로 나열하세요( 행별로가 아니라 ） >!). 지금까지 우리는:

왜곡된 보기를 얻기 위해 perspective도 추가했습니다(위쪽이 더 작음/뒤쪽이 더 작음).

지금까지의 코드는 위의 gif에 표시된 평면화된 버전을 제공합니다. 평면화된 버전이라고 말하는 이유는 여기까지 의사 객체가 항상 부모 평면에서 평면화되어 있기 때문입니다.

상위 div에 3D 변환이 없고 정면에서 보면 의사처럼 보이는 모양은 평면적입니다.

상위 div 确实具有 3D 变换时，其 3D 变换伪值会展平到其平面中，因为默认 transform-style 值为 flat。这意味着 3D 变换父级的任何 3D 变换子级/伪对象都会在父级平面中展平。如果我们将div的transform-style设置为preserve-3d에 3D 변환이 있는 경우 해당 3D 변환 의사 값은 평면으로 평면화됩니다. 기본 transform-style 값이 Flat이기 때문입니다. 즉, 3D 변환 상위 항목의 모든 3D 변환 하위 항목/의사 개체는 상위 평면에서 평면화됩니다. div의 transform-style을 preserve-3d로 설정하면 이 설정을 변경할 수 있습니다. 하지만 우리는 그것을 원하지 않습니다.

4단계: 상단 가장자리를 고정하세요!

아직도 올바르지 않은 것 한 가지 더: transform 상단 가장자리가 이제 원래 가장자리 아래에 있습니다.

우리가 설정한 방식perspective 以及它的工作原理。默认情况下，perspective-origin 死在我们设置它的元素的中间（在本例中是我们的 div），水平方向为 50%，垂直方向为 50%과 작동 방식 때문입니다. 기본적으로 perspective-origin은 우리가 설정한 요소(이 경우

perspective-origin (50% 50%)，只有 div 正中间垂直于屏幕平面的线上的点才会被投影到屏幕平面上的某个点：考虑视角后，与自己的 x,y 坐标相同的 x,y 坐标。考虑透视后，只有垂直于屏幕并沿 div기본 perspective-origin(50% 50%)을 사용하면 화면 평면에 수직인 선의

의 수평 중심선을 따라 화면과 교차하는 평면의 점만 해당 수평 중심선에 투영됩니다. perspective-origin 使其位于 div 顶部边缘的中间 (50% 0

) 이동하면 상단 가장자리를 따라 화면에 수직인 평면의 점이 상단 가장자리를 따라 투영됩니다. 즉, 3D 기울기 의사 개체의 상단 가장자리가 상단 가장자리와 동일한 선에 있게 됩니다. 그 부모의.

다음은 결과와 변환 전 버전 간의 실시간 비교 보기입니다. 두 div가 3D로 회전되어 xOy 평면에서 평평하다는 것을 보여줍니다.

탄젠트 값을 처리하기 위해 전처리기를 사용하고 싶지 않으신가요? Firefox와 Safari는 이미 기본적으로 삼각 함수를 지원하고 있으며 Chrome 111+에서는 chrome://flags에서 Experimental Web Platform Features 플래그를 활성화하여 삼각 함수를 지원합니다.

Chromium 지원을 기다리고 싶지 않으신가요? 거기에서 탄젠트 계산을 사용할 필요도 없으며 임의의 양수를 사용할 수 있습니다. 숫자가 클수록 위쪽 가장자리는 작아집니다. 나는 그것이 어디서 오는지 설명하기 위해 접선 값을 사용하지만 꼭 그럴 필요는 없습니다. 우리의 탄젠트는 0° 到 90° 的角度计算的。这为我们提供了从 0 到 +Infinity의 탄젠트입니다. 그렇습니다. 어떤 양수라도 행렬에 나타날 수 있습니다.