3 Panel CSS 3D Picture Canvas Mockup

This blog post was written by Nick McBurney and published 18th January 2020.

I posted my CSS only canvas style image/frame codepen link almost exactly 3 years ago and last month I was asked wether it would be possible to divide one image across more than one panel so thought I'd give it a go this weekend.

Heres what I've come up with, it uses CSS variables to store image size, panel size etc, split the image across three panels - correctly positioning the image and image bleeds.

It doesn't perfectly answer the question since I was also asked if it would be possible to have the canvas' at different sizes respective to each other - I think it would be if you created new variables for each 'panel' sizing CSS and I might give this a go in the future.

See the Pen 3 Panel CSS 3D Picture Canvas Mockup by Nick McBurney (@NickMcBurney) on CodePen.