Как сделать несколько преобразований в одном теге с помощью CSS?

Question

Я делаю кучу базовых диаграмм в HTML и SVG. Для того, чтобы х и у значения легче работать, я делаю горизонтальное зеркало, как это:

<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); 
} 

Дает одинаковый выход.