CODEWITHSUNDEEP
htmlcsssvgtransformcss-transforms
Lien
Lien

Reputation: 126

How do I do multiple transforms in one tag with CSS?

I am making a bunch of basic charts in HTML and SVG. To make x and y values easier to work with, I am doing a horizontal mirror like this:

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

This works perfectly: https://jsfiddle.net/as6naLsb/

However, I want to try and do this in CSS. When I take the transform out of the tag and try and put it in CSS like this:

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

it does not work.

When I inspect in the console of Chrome, it says "invalid property."

What is the correct way of doing it so I don't have to put the transform attribute in each tag?

Thanks!

Upvotes: 0

Views: 2425

Answers (2)

oompahlumpa
oompahlumpa

Reputation: 503

removing: transform="translate(0,200) scale(1,-1)"

and adding:

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

Gives the same output.

Upvotes: 0

Hum4n01d
Hum4n01d

Reputation: 1370

You need to put the px unit after the 0 and 200 in your translate transform. Try this:

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

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

I’m not sure why it worked as an inline style but you need the units :)

Upvotes: 1

Related Questions