Transformation polaire en CSS3?

Question

Tourner une ligne dans un anneau est une tâche simple dans les programmes graphiques tels que GIMP:

Filter ⇒ Distorts ⇒ Polar Coordinates http://adamhaskell.net/img/transform.png

Je suis en train de travailler s'il est possible de produire le même effet en CSS.

J'ai donc travaillé les opérations suivantes:

• Les cartes algorithme ci-dessus x à r et y à θ
• Pour ce faire, x est mis à l'échelle de la gamme de [0,w/2], avec w étant la largeur l'image
• En outre, y est mis à l'échelle à la gamme de [0,2π]
• Pour t ransformer les coordonnées polaires en cartésien: xc = rp*cos(θp) et yc = rp*sin(θp)
• Le résultat est ensuite traduit de sorte que l'origine se trouve au centre de l'image.
• Nous avons donc:

 

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

Tout cela est bien beau, mais comment puis-je produire une telle transformation en CSS? Vraisemblablement, aucun des mots-clés n'est utile, il doit donc s'agir d'une transformation Matrix. Eh bien, je n'ai aucune idée de comment construire une matrice à partir des deux équations ci-dessus, et encore moins comment la représenter dans une transformation CSS.

Quelqu'un peut-il m'aider sur cette dernière étape?

Answer 1

Je n'ai jamais travaillé avec des matrices de transformation CSS, mais je pense que ce que vous voulez est pas possible. À l'aide des matrices de transformation, vous effectuez une transformation linéaire . Les transformations linéaires TOUJOURS carte une ligne droite à une ligne droite ou à 0. Take a look at Wikipedia for more information.

Il est donc impossible de mapper une ligne droite à un cercle en utilisant des matrices.

Answer 2

au moins on peut faire 2 du troisième ordre symétrique courbe de Bézier Utilisation

Y (t) = (t^3, t 2, t, 1) * M * (P0, P1, P2, P3)

t - temps

P0 - les points de contrôle de coordonnées P3. Ce vecteur doit être vertical. Je ne sais pas comment faire du vecteur vertical dans cet éditeur.

Y (t) - courbe de coordonnées

M - 4 * 4 rangée matricielle 1 (-1,3, -3,1) à la ligne 2 (3, -6, -3,0) à la ligne 3 (-3,3,0,0) ligne 4 (1,0,0,0)

Vous n'avez plus besoin que d'une fonction définissant les points de contrôle à partir de vos coordonnées de ligne.