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

Question

CSS를 사용하여 여러 <코드>변환을 적용하려면 어떻게 해야 하나요?

예: 다음은 회전이 아닌 변환만 적용합니다.

li:nth-child(2) {
    변환: 회전(15deg);
    변환: 번역(-20px,0px);
}

Answer 1

이 답변은 도움이 될 것 같아서가 아니라 사실이기 때문에 추가하는 것입니다.

링크를 통해 여러 번역을 수행하는 방법을 설명하는 기존 답변을 사용하는 것 외에도 4x4 행렬을 직접 구축

할 수 있습니다.

인터넷 검색 중에 찾은 무작위 사이트 의 회전 행렬을 보여 주었습니다.

x축을 중심으로 회전:
y축을 중심으로 회전:
z축을 중심으로 회전:

좋은 번역 예를 찾을 수 없으므로 올바르게 기억/이해한다고 가정하면 번역은 다음과 같습니다.

으아악

변환에 관한 Wikipedia 기사 와 이에 대해 잘 설명하는 Pragamatic CSS3 튜토리얼 을 참조하세요. 임의 회전 행렬을 설명하는 또 다른 가이드는 Egon Rath의 행렬 노트

입니다.

물론, 이러한 4x4 행렬 사이에는 행렬 곱셈이 가능하므로 회전 및 평행 이동을 수행하려면 적절한 회전 행렬을 만들고 여기에 평행 행렬을 곱해야 합니다.

이렇게 하면 더 자유롭게 작업을 수행할 수 있으며, 여러분을 포함한 모든 사람이 5분 동안 무엇을 하는지 이해하는 것이 거의 완전히 불가능해집니다.

하지만 효과가 있어요.

편집: 저는 JavaScript를 통해 복잡한 3D 변환을 단계별로 생성하는 가장 중요하고 실용적인 용도를 놓쳤다는 것을 깨달았습니다.

Answer 2

다음과 같이 한 줄에 입력해야 합니다.

으아악

변환 명령이 여러 개인 경우 마지막 명령만 적용됩니다. 다른 CSS 규칙과 같습니다.

---

한 줄의 여러 변형은 오른쪽에서 왼쪽으로 적용 한다는 점을 기억하세요.

이것:变换：scale(1,1.5)rotate(90deg);
그리고: 变换：旋转(90deg)缩放(1,1.5);

같은 결과가 나오지 않습니다:

으아악 으아악