wonder webkit

wondering uses for CSS3 3D transformations

A tribute to the awesome wonder-wall by tha.ltd.

And a demo of WebkitCSSMatrix CSS3 Matrix3D. The wonder-wall effect is inspired by this great example, the Javascript Matrix library used is this, and the book covers are taken from here.

The interesting stuff is the possibility of manipulate the transformation matrix of any element of the DOM, In this case we get the matrix given only the 4 end points of the element, which is done porting OpenCV's cvGetPerspectiveTransform function and some trickery, the JavaScript code is here.

 

Right now the effect only works in Safari 5 (best) and Chrome 7 Dev works on latest Safari, Chrome, iOS, Firefox Nightly and IE10.
Roll over the elements and click them.

A Book of English Poetry G.B. Harrison

A Dictionary of Biology M. Abercrombie and others

A Dictionary of Psychology James Drever

A History of Latin America George Pendle

A History of Modern France Alfred Cobban

A Suitable Case for Treatment John Cooper

A touch of stagefright Jocelyn Davey

Anatomy of a Murder Robert Traver

Applied Geography L Dudley Stamp

At Lady Molly's Anthony Powell

ATTITUDES Marie Jahoda

Berlin Hostage for the West John Mander

Bill, the Gallactic Hero Harry Harrison

Billy Liar Keith Waterhouse

Boiled Alive Bruce Buckingham

Brave New World Aldous Huxley

Bridge Terence Reese

Britain in the Sixties John Vaizey

Carthage B.H Warmington

Closed circuit William Haggard

Coffin, scarcely used Colin Watson

Common Sense about Smoking C.M Fletcher and Others

Corpse diplomatique Delano Ames

Corridors of Power C.P Snow

Crime in a Changing Society Howard Jones

Discrimination and Popular Culture Denys Thompson

Dreadful summit Stanley Ellin

Drugs Peter Laurie

Encounter Groups Carl R. Rogers

Ethics P.H. Nowell Smith