/ Published in: jQuery
After giving a try with the Windows 8 Developer Preview i asked myself if i could reproduce the on click effect of the metro UI in a webpage.
Sadly, for what i know at this time CSS3 3d transformations works only on webkit browsers, so this is nothing more than a code exercise with no real job usefulness. Anyway, here it is: if you click on one of the big squared link they tilt in the direction of the nearest border and if you click exactly in the center they perform a reducing effect. If you try it in firefox or opera only the reducing effect works.
EXAMPLE: http://claudiobonifazi.com/snippets/metro_click/
Sadly, for what i know at this time CSS3 3d transformations works only on webkit browsers, so this is nothing more than a code exercise with no real job usefulness. Anyway, here it is: if you click on one of the big squared link they tilt in the direction of the nearest border and if you click exactly in the center they perform a reducing effect. If you try it in firefox or opera only the reducing effect works.
EXAMPLE: http://claudiobonifazi.com/snippets/metro_click/
URL: http://claudiobonifazi.com/snippets/metro_click