user66554 user66554 - 1 year ago 81
CSS Question

Calculating CSS transform matrix for SVG animation of rotation during translation

The square should be animated to rotate while moving along a straight line from the red square to the blue square. I can't get this to work as you can see from the moving square never matching the fixed blue square.

That problem appears repeatedly, therefore I need a reusable solution. That is: don't just give specific numbers for the matrix but also the calculation by which you arrived at those values.

So I need a

transform in terms of the following variables:

  • x1,y1
    is the initial point of the straight movement path (in the example below

  • x2,y2
    is the final point of the straight movement path (in the example below

  • cx,cy
    is the center of rotation (in the example below

  • a
    as angle by which to rotate (in the example below
    - I would prefer giving the value in radians but CSS doesn't seem to accept that);

such that the object rotates around
by angle
while the point
moves to
along a straight line (note that while
coincide in the example below this is not always the case, but the example was supposed to be simple).

Note that I do know how the matrices work, including how to compose transformations. The problem is that I do not know which particular transformations I need for this specific problem.

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<svg xmlns=""
width="250px" height="150px" viewBox="0 0 250 150">

@keyframes ani {
0% {fill:#f00;transform:translate(0, 0 );}
/* illustrating that movement works without rotation. */
25% {fill:#00f;transform: translate( 100px, 0 );}
50% {fill:#f00;transform:translate(0, 0 );}
/* with rotation it ends up anywhere but where it is supposed to go. */
75% {fill:#00f;transform: translate( 100px, 0 ) translate( 175px, 75px) rotate( 45deg ) translate( -175px, -75px );}
100% {fill:#f00;transform:translate(0, 0 );}
#p {animation: ani 4000ms ease-in-out 10ms infinite normal forwards;}

<path id="def" d="m0,0 l50,0 l0,50 l-50,0 l0,-50" />

<use xlink:href="#def" x="50" y="50" style="fill:#faa;" />
<use xlink:href="#def" x="150" y="50" style="fill:#aaf;" transform="rotate( 45 175 75 )" />

<use id="p" xlink:href="#def" x="50" y="50" />

Answer Source

The matrix I believe you want is basically this (thank you to this page for helping me figure it out):

transform: matrix(cos(angle),sin(angle),-sin(angle),cos(angle),translateDiffX,translateDiffY);

I don't think you can set trigonometry values in CSS (except perhaps with a pre-processor), so I made this fiddle where the CSS is overwritten via JavaScript (though in a sort of heavy-handed way), and changed up the angles and translation values to test to make sure it worked for other cases.

Note that without the transform-origin at the 0% and 100%, the animation has a sort of arc effect (though perhaps that's desirable/unimportant).