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.

Let me know what you think

Your email address will not be published. Required fields are marked *