css - CSS3 中的极坐标变换？

Question

在 GIMP 等图形程序中，将一条线变成一个环是一项简单的任务:

_{(来源:adamhaskell.net)}

我正在尝试找出是否有可能在 CSS 中产生相同的效果。

所以我得出了以下结论:

• 上述算法将x映射到r，将y映射到θ
• 为此，x 被缩放到 [0,w/2] 的范围内，其中 w 是图片
• 此外，y 的缩放范围为 [0,2π]
• 将极坐标转换回笛卡尔坐标:xc = rp*cos(θp) 和 yc = rp*sin(θp)
• 然后对结果进行平移，使原点位于图像的中心。
• 所以我们有:

x' = (x/2)*cos(y/h*2π) + w/2;  
y' = (x/2)*sin(y/h*2π) + h/2;

一切都很好，但我怎样才能在 CSS 中产生这样的转换呢？想必没有一个关键字有用，所以它必须是矩阵变换。好吧，我不知道如何从上面的两个等式构建矩阵，更不知道如何在 CSS 转换中表示它。

谁能帮我完成这最后一步？

Answer 1

我从未使用过 CSS 变换矩阵，但我认为您想要的不可能。使用变换矩阵，您可以进行线性变换。线性变换总是将直线映射到直线 或映射到 0。Take a look at Wikipedia for more information .

因此不可能使用矩阵将直线映射到圆。