CSS3中的极坐标变换？

Question

将一条线转换为环是GIMP等图形程序中的一项简单任务:

过滤器⇒扭曲⇒极坐标http://adamhaskell.net/img/transform.png

我正在尝试研究是否可以在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.有关详细信息,请查看维基百科.

因此,使用矩阵将直线映射到圆是不可能的.