CSS 3D 변환에서 '관점' 순서가 중요한 이유는 무엇입니까?

원근법을 사용한 CSS 3D 변환 마지막: 이유 이해

CSS 3D 변환을 사용하면 웹 요소에 복잡한 애니메이션과 원근감 효과를 구현할 수 있습니다. 그러나 관점 속성이 변환 목록의 끝에 배치되었을 때 흥미로운 관찰이 나타났습니다.

문제:

제공된 스니펫에서 두 상자의 마우스 커서가 서로 다릅니다. 행동. 원근 속성은 첫 번째 상자의 변환 목록 끝에 배치되고 두 번째 상자의 변환 앞에 배치됩니다.

box:nth-child(1):hover {
  transform: perspective(1000px) translate3d(0, 0, -100px);
}

box:nth-child(2):hover {
  transform: translate3d(0, 0, 100px) perspective(1000px);
}

이로 인해 두 변환이 겉으로는 동일해 보여도 시각적 결과가 달라집니다.

답변:

이 동작을 이해하는 열쇠는 변환 행렬의 순서에 있습니다. 계산되었습니다. CSS Transform 사양에 따라 행렬은 다음과 같이 계산됩니다.

1. 항등 행렬로 시작합니다.
2. transform-origin의 계산된 X와 Y로 변환합니다.
3. 변환 속성의 각 변환 함수를 왼쪽에서 오른쪽으로 곱합니다.
4. 부정 계산된 X와 변형 원점의 Y 값.

설명:

3단계에서는 왼쪽에서 오른쪽으로. 즉, 원근법이 목록 끝에 배치되면 원근법이 적용되기 전에 번역이 수행됩니다.

결과적으로 원근감 효과가 없는 상태에서 번역이 발생하므로 결과는 다음과 같습니다. 움직임은 평면적이고 깊이가 없는 것처럼 보입니다.

의미:

항상 관점을 배치하세요. 속성을 변환 목록 시작 부분에 추가하여 다른 변환보다 먼저 적용되도록 하세요.
• 변환하려는 요소 내에서는 원근감 속성을 적용하지 마세요. 효과가 없으므로 적용하지 마세요.

이러한 지침을 따르면 원근감 속성을 올바르게 적용하여 원하는 3D 변형 효과를 얻을 수 있습니다.

위 내용은 CSS 3D 변환에서 '관점' 순서가 중요한 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!