Back

CSS experimentations, 3D

Some of the fun of CSS3 is that it is actually unfinished! However, pushing the boundaries can make up for some really fun implementations. Keeping in mind progressive enhancement and 3D transforms are a fun playground...

Making a box

Since I thought I would really like to see something fold open/closed, I made 6 squares, folded them together as a box and on :hover put them back to their flat state. A simple transition definition and voila, 3D in motion!!!

1
2
3
4
5
6

But that was just a flat bunch of squares!!

Okok, I forgot to warn you that this is so experimental, it only works in webkit (Safari/Chrome and more) as of this writing (2011/05/04). So if you want to see what it would've looked like if you had a compatible webkit browser, check the video...

Download Video: Closed Format: "MP4" Open Format: "WebM" 3rd party: "YouTube"