CSS 3D Photo Fold

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

http://codepen.io/micjamking/pen/cuweI

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

  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <section>
    <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>
  </section>
</div>

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 :)