As discussed in the previous page, keyframes allow us to animate a path using CSS and HTML.
However, typically the path is generated in a clockwise direction. If the path is to be used in another animation, we need to be aware of this direction - some cases may require a counter-clockwise path.
There are two ways we can do this: when creating the original path, order the points in a counter-clockwise direction; manipulate an existing clockwise path.
We chose the second option here. In order to do this we can use a rotate transformation to flip an existing path horizontally, which results in the path moving in the opposite direction, as shown above.
Here's how:
The first transform command takes the small object and moves it while also enlarging (scaling) it.
The 2nd transform command then flips it 180° horizontally using the rotate command.
Note that we use -180 to perform the flip.
This technique could be used on other objects as well.