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.