CSS在透视父对象中倾斜的子框[已关闭]

xmd2e60i 于 2023-04-08 发布在其他

关注(0)|答案(1)|浏览(92)

**已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
3小时前关闭
Improve this question
今天我有一个关于CSS的问题。我已经离开Web开发有一段时间了，所以我只知道CSS-1和-2，但是我们现在已经超过了-3，我想知道现在是否可以设计透视图。

你可以看到一个在视口左边缘的导航的想法。视角从左（后）向右（前）移动。
父元素是一种梯形，其中的所有子元素根据其位置也是梯形，但它们是“倾斜”的。取决于位置，向上或向下。
颜色、内容、阴影和圆角对我来说都很清楚。
我那生疏的知识在透视方面只会有一点小失误。
1.如何使父元素具有规则的梯形形状？
1.有没有一种方法可以根据子元素在父元素中的位置来“移动”透视中的所有子元素？
1.如果可能的话，我还想添加一个变换过渡，用于悬停或单击透视图中的每个按钮。当悬停时，按钮应该“出来”2- 3 px，单击时“向后移动”。也许这也可以通过位置，大小和阴影宽度来模拟。
有人有什么想法或建议吗？
我还没有找到任何在线发电机，至少不是垂直对齐。😕
不要误会我的意思，我真的很想理解我的代码，我不希望有一个最终的代码。
我想和它一起玩，完全抓住它。

css

来源：https://stackoverflow.com/questions/75960170/css-skewed-child-boxes-in-a-perspective-parent

1条答案

按热度按时间

cbwuti441#

这里有一个如何使用透视图来给予你一个3D外观的例子。欢迎回到CSS。自从CSS-2以来，有很多变化

.wrapper {
  perspective: 100px;
}
.container {
  width: 5rem;
  background-color: lightskyblue;
  border-radius: 0 2rem 2rem 0;
  border: 2px solid black;
  rotate: y -2deg;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.container > div {
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid black;
  border-radius: 1rem;
  background: var(--c);
}

.red {
  --c: red;
}
.pink {
  --c: pink;
}
.orange {
  --c: orange;
}
.yellow {
  --c: yellow;
}
.green {
  --c: green;
}

<div class="wrapper">
  <div class="container">
    <div class='pink'></div>
    <div class='red'></div>
    <div class='orange'></div>
    <div class='yellow'></div>
    <div class='green'></div>
  </div>
</div>

赞(0）回复(0）举报 2023-04-08

我来回答

CSS在透视父对象中倾斜的子框[已关闭]

1条答案

相关问题

热门标签

最新问答