Centering and Scaling

[m_hutley]

Right. I’m having a day of this, it seems. CSS has never been my super-strong point.

I have a…pie graph isnt the right term. It’s a circular graph of 8 evenly arc-spaced sections, that have a variable size in terms of their radius. So the angle of the arc is constant (45 degrees), but the radius varies between sections.

To draw this on the page, I have 9 overlaid PNG files; one for the ‘axes’, and a colored one for each wedge of the graph. This works fine when all of the wedges are at their maximum size (so the width and height of the images are the same as their bounding div) by making the bounding div position: relative and the images position: absolute, top:0, left:0 with z-indexing keeping things in order.

The trick comes when I need to scale the image(s) downward. The center point of the image needs to stay… well, in the center, while the image width and height reduces. I could use Javascript to change the left and top properties to compensate for the change, but is there a better solution in CSS?

(Note: I cannot use SVG or Canvas due to the environment i’m working in.)

[SamA74]

I think the property you are looking for is transform-origin.
Though it should default to 50% 50% which is the centre.
How are you scaling?

[m_hutley]

I had thought to scale by changing height and width… but looking at the links off from transform-origin, should I be using transform: scale(0.X) instead?

[SamA74]

Yes, use transform.