In the recipe: https://iiif.io/api/cookbook/recipe/0040-image-rotation-service/

The second example uses CSS rotation with an origin in the center to rotate the image.

If you follow the steps of:

• Painting the image on the canvas at 0,0
• Rotate at the origin

The result is the image is offset from the canvas.

Because the target is just the canvas there is no indication of where it should be placed to start with before doing the transform.

This is different to the first rotation method where the transform happens before the resource is painted. (The CSS transform is like a post-processing step in the browser, happens on the GPU and its position in the DOM is based on its non-rotated version).