How did infusion.com skew the elements? The CSS file does not seem to have skewing in it and the menu is also skewed

Question

Can anyone help me discover how did the developers at http://infusion.com/ manage to skew everything? Even the sub-menu opens up skewed (but the text is not skewed. And there's no trick with image cropping or anything of the sort, hovering on the items works well.

Answer 1

It's there in the CSS:

.normal #nav {
  -moz-transform: skew(-20deg, 0deg);
  -o-transform: skew(-20deg, 0deg);
  -webkit-transform: skew(-20deg, 0deg);
}

The text is skewed in the reverse direction to make it look straight:

.normal #nav .menu li span {
  -moz-transform: skew(20deg, 0deg);
  -o-transform: skew(20deg, 0deg);
  -webkit-transform: skew(20deg, 0deg);
  transform: skew(20deg, 0deg);
}

Answer 2

They skewed the whole navigation and used an inverse skew for the texts so that they look upright. The resulting effect is that it looks as if the elements are skewed, only, when in fact the whole area is skewed using CSS transforms.

Use Chrome's "Inspect Element" tool and take a look at the CSS of the navigation element and the text spans!