如何使用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的控制台中检查时，它会显示“无效的属性。”

这样做的正确方法是什么，所以我不必将transform属性放在每个标签中？

谢谢！

Answer 1

您需要将px单位放在翻译转换中0和200之后。试试这个：

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

提供相同的输出。