如何在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); 
} 

給出相同的輸出。