如何使用 CSS 在一个标签中进行多次转换？答案

【问题标题】：How do I do multiple transforms in one tag with CSS?如何使用 CSS 在一个标签中进行多次转换？
【发布时间】：2017-02-01 18:06:40
【问题描述】：

我正在用 HTML 和 SVG 制作一堆基本图表。为了使 x 和 y 值更易于使用，我正在做一个像这样的水平镜：

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

但是，我想尝试在 CSS 中执行此操作。当我从标签中取出转换并尝试将其放入 CSS 中时：

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

它不起作用。

当我在 Chrome 的控制台中检查时，它显示“无效属性”。

这样做的正确方法是什么，这样我就不必在每个标签中放置转换属性？

谢谢！

【问题讨论】：

【解决方案1】：

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

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

我不确定为什么它可以作为内联样式使用，但您需要单位 :)

【讨论】：

【解决方案2】：

删除：transform="translate(0,200) scale(1,-1)"

并添加：

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

提供相同的输出。

【讨论】：