透视父母中的 CSS 倾斜子框

Question

今天我有一个 CSS 问题。 我已经离开网络开发一段时间了，所以我只知道 CSS-1 和 -2，但我们现在已经过了 -3，我想知道现在是否可以设计透视图......

在附件中，您可以在视口的左边缘看到导航的想法。视角从左（后）转移到右（前）。

父元素是一种梯形，里面的所有子元素按照位置也是梯形，只是“倾斜”。取决于位置，向上或向下。

颜色、内容、阴影和圆角对我来说一清二楚

我生疏的知识在透视方面只失败了一点。

1. 如何让父元素具有规则的梯形形状？
2. 有没有一种方法可以根据它们在父元素中的位置在透视图中“移动”所有子元素？
3. 如果可能的话，我还想添加一个转换过渡，以便在透视中悬停或单击每个按钮。按钮 悬停时应该“出来”2-3px，当悬停时“向后移动” 点击。也许这也可以通过位置、大小和 阴影宽度。

有人有什么想法或建议吗？
我还没有找到任何在线生成器，至少不是用于垂直对齐。 😕
不要误会我，我真的很想了解我的代码。我不希望有最终代码。
我想玩弄它并完全抓住它。