Your page in 3D
By glazou on Wednesday 27 July 2011, 00:49 - Mozilla - Permalink
Tilt is cool. Very cool. But I almost see it as a debugging tool and I wish the links were clickable, Firebug or DOMI could work. So I did what I always do in such a case, what I did long ago with Small Screen Rendering: I used CSS 
It's less powerful since the 3D is not dynamic but as a debugging tool, it's probably more useful.
Take a web page, any web page, and add this stylesheet to the document. Reload in Firefox.
body {
-moz-transform: skew(-6deg, 0deg);
-moz-transform-origin: center center;
}
*:not(body):not(html):not(a):not(img):not(span) {
-moz-transform: translate(0px, 6px);
-moz-border-bottom-colors: gray silver silver silver silver gray;
border-bottom: 6px silver solid;
-moz-border-right-colors: gray silver silver gray;
border-right: 4px transparent solid;
border-top: 1px gray solid;
border-left: 1px gray solid;
}
Note: you can use this very convenient bookmarklet: Test Styles. Just drop it onto your bookmarks toolbar and use it.
Update: of course, once we have 3D Transforms, it'll be even cleaner and simpler.
Comments
Whoa, freaky. Skewing the page like that hurts my eyes. Also, the 6px translation breaks the left-hand menu on your site, which is odd.
Interesting!! I tried it. But! I got the flavor of Tilt!
I found
*:not(body):not(html):not(a):not(img):not(span) {
-moz-transform: translate(0px, 6px);
-moz-box-shadow: 6px 6px 6px grey;
border: 1px gray solid;
}
was easier on the eyes, though it does need some internal padding to get a true feel for boxes that have the same width.
Hum, le bookmarklet n'a pas l'air de fonctionner sur mon site