여러 CSS 변환을 올바르게 적용하려면 어떻게 해야 합니까?

여러 CSS 변환 적용

CSS 변환을 사용하면 개발자는 변환, 회전, 크기 조정 등 다양한 방법으로 요소를 조작할 수 있습니다. 그러나 요소에 여러 변환을 적용하는 경우 일반적으로 마지막 변환만 실행됩니다.

문제:

다음 예에서는 번역 변환이 적용되지 않습니다. 회전 변환은 다음에 배치됩니다. it:

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

해결책:

여러 변환을 적용하려면 공백으로 구분하여 한 줄에 배치해야 합니다. 변환은 오른쪽에서 왼쪽으로 적용됩니다.

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

따라서 회전 변환이 먼저 적용된 다음 번역이 적용됩니다.

실행 순서:

여러 변환을 적용할 때는 변환 순서가 중요합니다. 예를 들어 요소를 90도 회전한 다음 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);
}

In 이 예에서 ".orderOne"은 90도 회전되고 1.5만큼 크기가 조정된 것으로 나타나는 반면, ".orderTwo"는 90도 회전된 후 크기가 1.5만큼 조정된 것으로 나타납니다. 1.5. 이는 변환 순서가 중요하며 여러 변환을 적용할 때 신중하게 고려해야 함을 보여줍니다.

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