PUBLIC MARKS with tags 3d & javascript

A tribute to the awesome wonder-wall by tha.ltd. And a demo of WebKitCSSMatrix. 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. Roll over the elements and click them.

Moving Sonic the Hedgehog to the right caused the foreground to move past the camera to the left faster than the background, creating a faux-3D view of Green Hill Zone. We can create a similar effect on a web page by fixing semi-transparent background images to different sides of the browser viewport, and at different horizontal percentage positions.

3D on 2D canvas demo

Attempt to make a panorama using just JavaScript. It creates a series of div columns, and then puts copies of the image in each column. As you move your mouse across the image, it stretches the columns vertically along a sin curve to fake the 3D look