Flickr Postcards

This demonstration shows off some of what can be done using features from the CSS3 2D Transforms module together with Flickr.

Your browser does not support CSS3 2D Transforms. Try Internet Explorer 9 Platform Preview.

Your browser supports CSS3 2D Transforms using the standard transform property.

Your browser supports CSS3 2D Transforms using the vendor-prefixed -ms-transform property.

Your browser supports CSS3 2D Transforms using the vendor-prefixed -webkit-transform property.

Your browser supports CSS3 2D Transforms using the vendor-prefixed -moz-transform property.

Your browser supports CSS3 2D Transforms using the vendor-prefixed -o-transform property.

 
Visit Flickr.com

The CSS3 2D Transforms features used in this demo are (1) a slight rotation of the page header, (2) a slight rotation of the caption below each photo, (3) a 90° rotation of the credit to the right of each photo, and (4) a scale and rotate transform when the mouse is moved over the postcard. Messy Layout sets a scale and rotate transform on each postcard.

The hand drawn font used here was published by Apostrophic Laboratories and downloaded in Web Open Font Format (WOFF) from http://www.fontsquirrel.com/fonts/Desyrel.