user66554 - 1 year ago 99
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

`matrix()`
transform in terms of the following variables:

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

• `x2,y2`
is the final point of the straight movement path (in the example below
`175,75`
);

• `cx,cy`
is the center of rotation (in the example below
`75,75`
);

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

such that the object rotates around
`cx,cy`
by angle
`a`
while the point
`x1,y1`
moves to
`x2,y2`
along a straight line (note that while
`x1,y1`
and
`cx,cy`
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="http://www.w3.org/2000/svg"
width="250px" height="150px" viewBox="0 0 250 150">
<style>
*{stroke:black;stroke-width:1px;}

@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;}
</style>

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

<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" />
</svg>``````

``````transform: matrix(cos(angle),sin(angle),-sin(angle),cos(angle),translateDiffX,translateDiffY);
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).