한 줄에 여러 CSS 변환을 적용하는 방법과 적용 순서는 무엇입니까?

한 줄에 여러 CSS 변환 적용

CSS에서는 요소에 여러 변환을 동시에 적용할 수 있습니다. 그러나 여러 변환 지시어를 제공하는 경우 마지막 하나만 적용됩니다.

한 줄에 여러 변환을 적용하려면 공백으로 연결하세요.

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

적용

여러 변형이 오른쪽에서 왼쪽으로 적용된다는 점에 유의하는 것이 중요합니다. 이는 다음과 같이 변환 순서가 중요하다는 것을 의미합니다.

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

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

예

다음 예를 고려하세요.

.orderOne, .orderTwo {
    font-family: sans-serif;
    font-size: 22px;
    color: #000;
    display: inline-block;
}

.orderOne {
    transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
    transform: rotate(90deg) scale(1, 1.5);
}

다른 변형을 적용하여 차이점을 관찰할 수 있습니다. 주문하세요.

위 내용은 한 줄에 여러 CSS 변환을 적용하는 방법과 적용 순서는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!