線をリングに変えることは、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でこのような変換を作成するにはどうすればよいですか?おそらく、どのキーワードも役に立たないので、行列変換である必要があります。さて、私は上記の2つの方程式から行列を作成する方法、ましてやCSS変換でそれを表現する方法がわかりません。
誰かがこの最後のステップで私を助けることができますか?