title: Polar transform in CSS3?
body: <p>Turning a line into a ring is a simple task in graphics programs such as GIMP:</p>
  <p><a href="https://i.stack.imgur.com/7lQZe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7lQZe.png" alt="Filter ⇒ Distorts ⇒ Polar Coordinates" /></a><br />
  <sub>(source: <a href="http://adamhaskell.net/img/transform.png" rel="nofollow noreferrer">adamhaskell.net</a>)</sub></p>
  <p>I'm trying to work out if it's possible to produce the same effect in CSS.</p>
  <p>So I worked out the following:</p>
  <ul>
  <li>The above algorithm maps <code>x</code> to <code>r</code> and <code>y</code> to <code>θ</code></li>
  <li>To do this, <code>x</code> is scaled to the range of <code>[0,w/2]</code>, with <code>w</code> being the width of the image</li>
  <li>Also, <code>y</code> is scaled to the range of <code>[0,2π]</code></li>
  <li>To transform polar coordinates back into Cartesian: <code>xc = rp*cos(θp)</code> and <code>yc = rp*sin(θp)</code></li>
  <li>The result is then translated so the origin is in the centre of the image.</li>
  <li>So we have:</li>
  </ul>
  <p> </p>
  <pre><code>x' = (x/2)*cos(y/h*2π) + w/2;  
  y' = (x/2)*sin(y/h*2π) + h/2;
  </code></pre>
  <p>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.</p>
  <p>Can anyone help me on this last step?</p>