CSS 3D Picture Canvas Mockup
This blog post was written by Nick McBurney and published 19th January 2017
I’m a big fan of CodePen and regularly use it to try ideas, experiment and build prototypes. I built this mock-up because I wanted to see if I could build a photo canvas mock-up using just CSS and HTML.
My mock-up uses CSS3 transform properties and absolute positioning to reflect the image and give it 3d perspective. I used SCSS to make the mock-up easily dynamic and minimise code using mixins. The mock-up has SCSS variables to change canvas image, dimensions and frame type: image wrap, white frame and black frame.
You can play around with my mock-up and update the image url, canvas dimensions, canvas frame depth and type by visiting my CodePen demo.