번역이 Transform-Origin을 대체할 수 있나요?

번역을 사용한 변환 원본 시뮬레이션: 비밀 공개

CSS의 변환 원본 속성은 변환의 원점에 대한 탁월한 제어 기능을 제공합니다. 그러나 다음 단계를 따르면 순수 변환: 번역을 사용하여 해당 기능을 독창적으로 복제할 수 있습니다.

1. 번역 반전:

원래 시도와 반대로 올바른 결과를 얻으려면 번역 값을 반전해야 합니다. 그 이유는 Translation은 양수 값을 오른쪽 또는 아래로 이동하는 것으로 해석하는 반면,Transform-Origin은 왼쪽 상단에서 측정하기 때문입니다.

2. 변환 원본 정렬:

기본 변환 원본은 요소의 중심으로 설정됩니다. 시뮬레이션이 제대로 작동하려면 변환 기술을 사용하여 변환하는 요소의 변환 원본을 왼쪽 상단(0, 0)에 정렬하세요.

예:

다음 수정된 코드를 고려해보세요.

.origin {
  transform-origin: 50px 50px;
  transform: rotate(45deg) scale(2);
}

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

이러한 원칙을 따르면 다음의 동작을 효과적으로 시뮬레이션할 수 있습니다. 변환을 사용하여 변환 원본을 사용하면 미묘한 변형을 쉽게 잠금해제할 수 있습니다.

위 내용은 번역이 Transform-Origin을 대체할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!