What I would like to do is center an image on a page, where the image is several times larger than the viewport. The image's center must align perfectly with the center of the current viewpoint (with dynamic, different-sized images and viewports). Then, using CSS animations, I must animate the image to rotate. Let's also assume that the solution cannot use jQuery or Javascript, and the overflow is hidden.

The solution must avoid using CSS `transform()` and `translate()`, since they mess up the keyframe animations, and other styles on the page. I also do not own this particular site, so external libraries, adding stylesheets, and modifying `<html>` and `<body>` are restricted.

**Note:** Have code, but not posting it because it's all wrong.