CSS Transform-Origin을 완벽하게 모방하는 번역만 가능합니까?

변환을 사용한 변환 원점 시뮬레이션: 크기 조정 및 회전 편차 해결

CSS에서 변환 원점 속성을 사용하면 요소의 정확한 위치 지정이 가능합니다. 특정 지점을 중심으로 변환됩니다. 그러나 변환만 사용하여 기능을 복제하면 번역이 문제가 될 수 있으며, 특히 크기 조정 및 회전 변환과 결합할 때 문제가 발생할 수 있습니다.

MDN 문서에 따르면 변환을 사용한 변환 원본 시뮬레이션에는 다음이 포함됩니다.

1. 지정된 변환 원본 값을 부정하고 이를 초기 번역으로 적용합니다.
2. 원하는 값을 적용합니다. 변환.
3. 원래 변환된 값으로 요소를 다시 변환합니다.

이 접근 방식을 따랐음에도 불구하고 개발자는 변환 원본 동작을 모방하려고 할 때 일반적으로 잘못된 결과를 경험하게 됩니다. 이러한 불일치의 원인은 다음과 같습니다.

1. 번역 역전:

제공된 CSS 코드에는 .translate 클래스 내 번역 순서에 오류가 포함되어 있습니다. 변환 원본을 올바르게 시뮬레이션하려면 초기 및 최종 번역을 반전해야 합니다. 수정된 코드는 다음과 같습니다.

.translate {
  transform: translate(100px, 100px) translate(100px, 0px) scale(2) rotate(45deg) translate(-100px, -100px);
}

2. 변환 원본 조정:

또 다른 문제는 .translate 클래스의 변환 원본 속성에 있습니다. 기본적으로 변환 원본은 중앙(50% 50%)으로 설정됩니다. 그러나 변환 원본의 동작을 일치시키려면 이 참조점을 요소의 왼쪽 상단(0 0)으로 이동해야 합니다.

.translate {
  transform-origin: 0 0;
  ...
}

이러한 수정 사항을 통합하면 정확한 시뮬레이션을 얻을 수 있습니다. 번역을 사용한 변환 출처. 이러한 수정을 통해 원본 CSS 코드에서 관찰된 크기 조정 및 회전의 불일치가 해결됩니다.

위 내용은 CSS Transform-Origin을 완벽하게 모방하는 번역만 가능합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!