변형 : translateX는 변형에 영향을줍니다 : translateY

Question

저는 햄버거 메뉴에 애니메이션을 적용하려고합니다. .burger-icon:before - transform: translateX(20px)의 X 좌표를 변경하려고 시도하면 Y도 변경됩니다. 감사! 나는 X가 .burger-아이콘 좌표를 변경하려고하면

.menu-button.is-active .burger-icon { 
    transform: translateY(2px) rotate(135deg); 
} 
.menu-button.is-active .burger-icon:before { 
    transform: translateX(20px) translateY(10px) rotate(-45deg); 
} 
.menu-button.is-active .burger-icon:after { 
    transform: translateY(-19px) rotate(33deg); 
} 

Answer 1

: 여기

<button class="menu-button" type="button" data-toggle="-menu" id="burger-button"> 
    <span class="burger-icon"></span> 
</button> 

내 CSS입니다 : 여기

는 HTML입니다 - transform: translateX(20px) - 전에이 변경 Y. 당신이 만transform: translateY(10px)을 지정할 때

을 의미?

물론 그렇습니다.

는 당신은 여기 하나의 CSS 속성 값을 변경 - 그 속성은 transform입니다.

다른 변환 함수에 명시 적 값을 지정하지 않으면 해당 값이 기본값이됩니다.

Answer 2

나는 질문을받지 못할 것이라고 생각합니다.

.burger-icon : before-transform : translateX (20px)에서 X 좌표를 변경하려고하면 Y도 변경됩니다.

그리고 코드에서

당신은이 :

.burger-icon:before { 
    transform: translateX(20px) **translateY(10px)** rotate(-45deg); 
} 

무슨 말을하려는거야? 코드를 변경하면 :

.burger-icon:before { 
    transform: translateX(35px) translateY(10px) rotate(-45deg); 
} 

y 좌표가 변경됩니까? 그게 이상 할거야. 당신이 그것을 변경하는 경우 그러나 :

.burger-icon:before { 
    transform: translateX(35px); 
} 

당신이 translateY 변환 제거로는 정상입니다, 그래서 디폴트 값 (0)로 돌아갑니다.

---

난 그냥 여기 추측하고있다 : 어쩌면

당신과 같이 자바 스크립트를 통해 변환의 값을 변경하려고 :

element.style.transform = "translateX(35px)"; 

을 잘 경우에, 그것은 마치입니다 transform 속성 값을 "translateX (35px)"로 설정 했으므로 위에서 설명한 것과 동일한 상황이 발생합니다.