infusion.com 是如何扭曲元素的?CSS文件似乎没有倾斜，菜单也歪斜

Question

谁能帮我发现 http://infusion.com/的开发人员是如何设法扭曲一切的？ 甚至子菜单也会倾斜打开（但文本不会倾斜。 而且图像裁剪或类似的东西没有任何技巧，将鼠标悬停在项目上效果很好。

Answer 1

它在CSS中：

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

文本向相反方向倾斜以使其看起来笔直：

.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

他们歪曲了整个导航，并对文本使用了反向倾斜，使它们看起来直立。由此产生的效果是，它看起来好像元素是倾斜的，只是当实际上整个区域使用 CSS 转换倾斜时。

使用Chrome的"检查元素"工具，查看导航元素的CSS和文本跨度！