CSS를 사용하여 하나의 태그에서 여러 변형을 수행하려면 어떻게해야합니까?

Question

저는 HTML과 SVG로 기본 차트를 만들고 있습니다. x와 y 값을 쉽게, 나는이 같은 수평 거울을하고있는 중이 야와 함께 작동하도록 만들려면 :이 완벽하게 작동

<g class="mirror" transform="translate(0,200) scale(1,-1)"> 

: https://jsfiddle.net/as6naLsb/

는 그러나, 나는 시도하고 CSS에서이 작업을 수행 할 수 있습니다. 태그 밖으로 변형을 가져와 다음과 같이 CSS에 넣으려고하면 :

g.mirror{ 
     transform:translate(0,200) scale(1,-1); 
    } 

이 작동하지 않습니다.

Chrome 콘솔에서 조사 할 때 "유효하지 않은 속성"이라고 표시됩니다.

각 태그에 변형 속성을 넣지 않아도되는 올바른 방법은 무엇입니까?

감사합니다.

Answer 1

변환 변환에 0 및 200 뒤에 px 단위를 넣어야합니다. 이 인라인 스타일로 일 이유

transform: translate(0px, 200px) scale(1, -1); 

https://jsfiddle.net/as6naLsb/1/

는 잘 모르겠어요하지만 당신은

Answer 2

제거 : 유닛이 필요합니다 :이 시도 transform="translate(0,200) scale(1,-1)"

및 추가를 :

.chart { 
    transform: rotate(180deg); 
} 

동일한 출력을 제공합니다.