Last Updated: February 25, 2016
· micjamking

CSS 3D Photo Fold

Here is a technique I used to simulate a 3D Photo folding technique idea that I saw on dribbble:


The code for the technique is fairly simple, using the following html

    <a href="#"><i class="icon-lock"></i></a>
    <a href="#"><i class="icon-upload-alt"></i></a>
    <a href="#"><i class="icon-trash"></i></a>

The icons used in the code example are from font-awesome, but you could simplify the html a bit by using an icon font's unicode character in the content property of a pseudo element.

Currently, this only works in Chrome & Safari because of the use of 3D transforms, but it's a fun experiment nonetheless :)

2 Responses
Add your response


over 1 year ago ·

Very cool idea but doesn't play well on Chrome...

over 1 year ago ·