0

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

4

2 回答 2

2

它在 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);
}
于 2014-01-17T08:35:31.813 回答
2

他们对整个导航进行了倾斜，并对文本使用了反向倾斜，以使它们看起来是直立的。结果是元素看起来好像是倾斜的，但实际上整个区域是使用 CSS 变换倾斜的。

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

于 2014-01-17T08:38:31.957 回答