여러 위치에서 CSS 변환 설정

Question

transform: translateX(100px) translateY(200px) rotate(100deg) scale(1.5)을 여러 위치에 설정하는 방법이 있습니까?

.translate-x { 
    transform: translateX(100px); 
} 

.translate-y { 
    transform: translateY(200px); 
} 

.rotate { 
    transform: rotate(100deg) 
} 

.big { 
    transform: scale(1.5); 
} 

그리고, 내가 transform을 결합하는 HTML에서이 클래스를 사용하고 싶습니다 예를 들어, CSS에서이 라인이있다.

<div class="translate-x rotate big"></div> 
<div class="translate-y big"></div> 
... 

문제는 스타일이 결합되지 않지만 마지막 것이 다른 것을 덮어 쓰는 것입니다.

내가 아는 유일한 방법은 모든 클래스를 결합하는 것입니다. 그러나 많은 조합이 있습니다 ...

.translate-x.translate-y { 
    transform: translateX(100px) translateY(200px); 
} 

.translate-x.translate.y.big { 
    transform: translateX(100px) translateY(200px) scale(1.5); 
} 

... 

Answer 1

불행히도, 당신은 할 수 없습니다. 다음과 같이 transform 구문을 사용하면 HTML 요소에 여러 클래스를 호출 할 때

transform: none|transform-functions|initial|inherit; 

그래서, 단지 당신의 CSS에서 선언 된 마지막 class이 적용된다. ( class 순서는 HTML에서는 중요하지 않습니다.)

가장 좋은 방법은 하나의 선언에서 호출 된 이러한 변환 함수의 문자열을 생성하여 재정의하지 않도록하는 기능을 가진 CSS 전처리기를 사용하는 것입니다.

Answer 2

대답은 위에서 언급 한대로 현재로서는 혼자서는 불가능합니다. 그것을 적용하려면 자바 스크립트를 사용해야합니다. 여기

는

$('.my-element').css({ 
'transform': 'translateX(100px) translateY(200px) rotate(100deg) scale(1.5)' 
}); 

바닐라 JS의 방법은 다음과 같다 작은 jQuery를 예입니다 :

var myElement = document.getElementsByClassName('my-element'); 
myElement.style.transform = 'translateX(100px) translateY(200px) rotate(100deg) scale(1.5)'; 

당신은 적용하려면 다음과 같은 3 가지 방법을 사용할 수 있어야합니다

중 하나

1. 이벤트 리스너 (이벤트 위임이 바람직 함)
2. 재미 있음 ctions
3. 글리치를 방지하기 위해 요소가 변형되기 전에 렌더링되도록 본문 맨 아래에 스크립트를 포함하기 만하면됩니다.