`transform:translate`만 사용하여 CSS`transform-origin`을 어떻게 시뮬레이션할 수 있습니까?

CSS에서 번역을 사용하여 변환 원본 시뮬레이션

CSS에서 변환 원본 속성은 요소에 변환을 적용하기 위한 원점을 정의합니다. . 이 속성은 먼저 자체 변환 원본 속성의 부정된 값으로 요소를 변환한 다음 요소의 변환을 적용한 다음 속성 값으로 변환하여 적용된다는 점에 유의하는 것이 중요합니다.

변환을 사용하는 변환 원본의 동작: 번역, 다음 단계가 필요합니다.

1. 변환 원본을 무효화합니다. 값: 변환 원본 값은 번역으로 적용하기 전에 무효화되어야 합니다. 이는 번역 변환이 원점에 음수 값을 적용하여 원점을 효과적으로 반전시키기 때문입니다.
2. 요소의 변환 적용: 변환-원점 값을 부정한 후 요소의 변환은 다음을 수행할 수 있습니다. 평소와 같이 적용됩니다.
3. 원점 번역: 마지막으로 다음을 사용하여 원점을 다시 원래 위치로 번역합니다. 양의 부정 변환 원점 값. 이 단계를 수행하면 원점이 의도한 위치로 재설정됩니다.

잘못된 예:

제공된 예에서 문제는 잘못된 번역입니다. 변환 원본에 대한 부정된 값이 올바르게 적용되었지만 최종 번역이 누락되었습니다. 다음 수정된 코드는 정확한 결과를 생성합니다.

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

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

올바른 예:

수정된 이 예에는 원점을 복원하는 데 필요한 최종 번역 단계가 포함되어 있습니다. 의도한 위치로 이동합니다. 결과적으로 상자는 동일한 변환된 모양을 나타내며, 이는 실제로 변환: 변환을 사용하여 변환 원본을 시뮬레이션할 수 있음을 보여줍니다.

위 내용은 `transform:translate`만 사용하여 CSS`transform-origin`을 어떻게 시뮬레이션할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!