j0u48g
Last Updated: February 25, 2016
·
1.533K
· micjamking
Mike headshot

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

Picture

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

Say Thanks
Respond

2 Responses
Add your response

7421

niceeeeeeee

over 1 year ago ·
18328
None

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

over 1 year ago ·