CSS에서 여러 변환을 적용하는 방법

질문 : CSS에서 여러 변환을 적용하는 방법은 무엇입니까?

---

CSS를 사용하여 둘 이상의 transform 어떻게 적용 할 수 있습니까?

예 : 다음에서는 회전이 아닌 변환 만 적용됩니다.

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

답변

---

다음과 같이 한 줄에 넣어야합니다.

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

여러 변환 지시문이있는 경우 마지막 지시문 만 적용됩니다. 다른 CSS 규칙과 같습니다.

여러 변환 한 줄 지시문이 오른쪽에서 왼쪽으로 적용 된다는 점에 유의하십시오.

이것은 : 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);
}

<div class="orderOne">
  A
</div>

<div class="orderTwo">
  A
</div>

 

 

출처 : https://stackoverflow.com/questions/10765755/how-to-apply-multiple-transforms-in-css