Polar transform in CSS3?
css, css-transforms
Solution
I never worked with CSS transform matrices, but I think what you want is not possible. Using transform matrices you do a linear transformation. Linear transformations ALWAYS map a straight line to a straight line or to 0. Take a look at Wikipedia for more information.
So it's impossible to map a straight line to a circle using matrices.
Problem
Turning a line into a ring is a simple task in graphics programs such as GIMP: (source: adamhaskell.net) I'm trying to work out if it's possible to produce the same effect in CSS. So I worked out the following: - The above algorithm maps `x` to `r` and `y` to `θ` - To do this, `x` is scaled to the range of `[0,w/2]`, with `w` being the width of the image - Also, `y` is scaled to the range of `[0,2π]` - To transform polar coordinates back into Cartesian: `xc = rp*cos(θp)` and `yc = rp*sin(θp)` - The result is then translated so the origin is in the centre of the image. - So we have: ``` x' = (x/2)*cos(y/h*2π) + w/2; y' = (x/2)*sin(y/h*2π) + h/2; ``` This is all fine and dandy, but how can I produce such a transform in CSS? Presumably none of the keywords are useful, so it has to be a Matrix transform. Well, I have no idea how to build a matrix from the two equations above, much less how to represent it in a CSS transform. Can anyone help me on this last step?