Perspective rotation cropping


Newbie here so please be gentle :slight_smile:

I’m testing things out and trying to have a very subtle perspective rotation on a full page image (which ultimately will be part of a carousel of images), which I’ve done and works just as expected…BUT! … I’m getting white borders along the edges when the image rotates. So rather than it using the available image outside the cropped area, it’s just rotating what’s initially in view.

I’m sure I’m missing something simple on how to fix this so it uses the overflow that’s available…any ideas?

Huge thanks in advance.

Here’s a link to the project share:

And here’s a screen shot showing what i mean when the mouse is in the top left (and yes, the vast majority of those browser tabs are me trying to work this out :smile: )

(I can bodge it slightly in two ways but they raise issues I’m being picky about:

  1. Put the same image in the background with zero interaction. Then rotate the the image in the foreground with slight zoom. This unfortunately adds scroll bars which i don’t want.
  2. Put the same image in the background with zero interaction. This time, reducing the size of the container around the rotating element and rotating that. That unfortunately doesn’t scale perfectly at different screen sizes and can make the background image noticeable around the edges.)