여러 CSS 변환을 요소에 어떻게 적용합니까?

여러 CSS 속성을 사용하여 요소 변환

CSS를 사용하면 요소에 여러 변환을 적용할 수 있습니다. 그러나 변환 속성을 여러 번 사용하는 경우 마지막 지시문만 적용됩니다. 여러 변형을 적용하려면 한 줄에 결합해야 합니다.

예:

다음 CSS에서는 번역만 요소에 적용됩니다.

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}

두 가지 변환을 모두 적용하려면 하나로 결합하세요. line:

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

변환 순서

한 줄에 적용된 여러 변환은 오른쪽에서 왼쪽으로 처리됩니다. 즉, 가장 오른쪽 변환이 먼저 적용됩니다.

다음 예를 고려하세요.

transform: scale(1, 1.5) rotate(90deg);

transform: rotate(90deg) scale(1, 1.5);

이 두 변환은 신청 순서가 다릅니다.

위 내용은 여러 CSS 변환을 요소에 어떻게 적용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!