CSS3中的极地变换?

前端之家收集整理的这篇文章主要介绍了CSS3中的极地变换?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
将线条变成戒指是图形程序中的简单任务,如GIMP:

Filter ⇒ Distorts ⇒ Polar Coordinates 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变换中表示它.

任何人可以帮助我最后一步吗?

解决方法

我从来没有使用CSS变换矩阵,但我想你想要的是不可能的.
使用变换矩阵进行线性变换.线性变换始终将直线映射到直线或0. Take a look at Wikipedia for more information.

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

猜你在找的CSS相关文章