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

CSS 3D 변환 기능: 관점 순서

CSS 3D 변환은 3차원에서 요소를 조작하기 위한 강력한 옵션을 제공합니다. 그러나 한 가지 특이한 점이 관찰되었습니다. 변환 속성 내의spective() 함수 순서가 결과 변환에 영향을 미칩니다.

순서 문제

다음 코드를 고려하세요. snippet:

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

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

여기서 요소는 화면 안팎으로 이동하도록 되어 있습니다. 그러나 효과는 첫 번째 상자에만 표시되고 두 번째 상자는 영향을 받지 않습니다. 이 이상한 동작은spective() 함수의 순서가 중요하기 때문에 발생합니다.

변환 계산

CSS 사양에 따르면 변환 행렬은 변환 속성에서 계산됩니다. 다음 순서대로:

1. 지정된 번역 적용 Transform-origin
2. 왼쪽에서 오른쪽으로 각 변환 함수를 곱합니다
3. transform-origin으로 지정된 역변환

이는spective() 함수가 다음을 수행해야 함을 의미합니다. 효과를 올바르게 고려하려면 먼저(즉, 가장 왼쪽) 적용해야 합니다.

관점을 피하세요. 변형된 요소 내에서

또한 요소 자체 내에서 관점 속성을 사용하지 않는 것이 중요합니다. 이는 논리적으로 보일 수 있지만 불필요하며 예상치 못한 결과를 초래할 수 있습니다.

따라서 원하는 3D 변환을 얻으려면 항상spective() 함수가 변환 속성의 첫 번째로 나열되어 있는지 확인하세요.

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