3 panel CSS 3d canvas mock up

3 Panel CSS 3D Picture Canvas Mockup

This blog post was written by 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.