如何制作具有拉伸效果的 3D 元素？答案

【问题标题】：How to make a 3D element with an extrude effect?如何制作具有拉伸效果的 3D 元素？
【发布时间】：2020-08-02 19:55:19
【问题描述】：

我创建了一个等距的 10x10 字段：

transform : rotateX(60deg) rotateY(0deg) rotateZ(-45deg)

是否有任何属性可以修改 div 的“z-heigth”，允许我为每个内部单元格赋予不同的“深度”，从而创建一个列？

单元格和表格当前代码：

#table {
  width: 600px;
  height: 600px;
  background-color: white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg)
}

#table>DIV {
  width: 58px;
  height: 58px;
  background-color: #ffffff;
  border: 1px solid grey;
}

<div id="table">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

【问题讨论】：

单元格是通过 JS 创建的。我不认为这里需要html，我只需要控制3维大小的CSS属性
您的 HTML 让我们能够更快地重现您的问题，查看并解释您的代码中出现的错误，并更好地帮助我们提供适用的解决方案。您发布“minimal reproducible example”代码（在本例中包括 HTML）也是网站的一项要求。如果没有那个minimal reproducible example 代码，您的问题就有资格作为离题关闭。
请注意，要获得具有 30° 角的真正等距投影，您需要 rotateX(54.736deg)，即 atan(sqrt(2))。要使您的等距缩放，您还需要附加scale3D(1.2247, 1.2247, 1.2247)，即 sqrt(3)/sqrt(2)。演示可以找到here

标签： html css css-transforms

【解决方案1】：

您可以使用一些透视和变换。不要忘记在父元素中添加transform-style:preserve-3d;

#table {
  width: 600px;
  height: 600px;
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
  transform-style:preserve-3d; /* this is important */
}

#table > * {
  width: 58px;
  height: 58px;
  background-color: pink;
  border: 1px solid grey;
}

div:nth-child(50) {
  transform:perspective(100px) translateZ(30px);
}
/* or without perspective */
div:nth-child(10) {
  transform:translateZ(30px);
}

<div id="table">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

也像下面通过添加伪元素来创建“墙”

#table {
  width: 600px;
  height: 600px;
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
  transform-style:preserve-3d; /* this is important */
}

#table > * {
  width: 58px;
  height: 58px;
  background-color: pink;
  border: 1px solid grey;
}

div:nth-child(7n + 3) {
  transform:translateZ(58px);
  transform-style:preserve-3d; /* this is important */
}
div:nth-child(7n + 3)::before,
div:nth-child(7n + 3)::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;
  border:inherit;
}
div:nth-child(7n + 3)::before {
  transform-origin:left;
  transform:rotateY(90deg);
}
div:nth-child(7n + 3)::after {
  transform-origin:bottom;
  transform:rotateX(90deg);
}

<div id="table">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

为了使其通用，我们可以添加一些 CSS 变量：

#table {
  width: 600px;
  height: 600px;
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
  transform-style:preserve-3d; /* this is important */
}

#table > * {
  width: 58px;
  height: 58px;
  background-color: pink;
  border: 1px solid grey;
}

div[style*='--d'] {
  transform:translateZ(var(--d));
  transform-style:preserve-3d; /* this is important */
}
div[style*='--d']::before,
div[style*='--d']::after{
  content:"";
  bottom:0;
  left:0;
  position:absolute;
  background:inherit;
  border:inherit;
}
div[style*='--d']::before {
  width:var(--d);
  top:0;
  transform-origin:left;
  transform:rotateY(90deg);
}
div[style*='--d']::after {
  height:var(--d);
  right:0;
  transform-origin:bottom;
  transform:rotateX(90deg);
}

<div id="table">
  <div></div><div></div><div></div><div></div><div></div><div style="--d:150px;"></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div style="--d:70px;"></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div style="--d:20px;"></div><div></div><div></div><div></div><div></div><div style="--d:40px;"></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div  style="--d:100px;"></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

一些有趣的动画：

#table {
  width: 600px;
  height: 600px;
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
  transform-style:preserve-3d; /* this is important */
}

#table > * {
  width: 58px;
  height: 58px;
  background-color: pink;
  border: 1px solid grey;
}

div[style*='--d'] {
  transform:translateZ(var(--d));
  animation:a 2s linear infinite alternate;
  transform-style:preserve-3d; /* this is important */
}
div[style*='--d']::before,
div[style*='--d']::after{
  content:"";
  bottom:0;
  left:0;
  position:absolute;
  background:inherit;
  border:inherit;
  animation:inherit;
}
div[style*='--d']::before {
  width:var(--d);
  top:0;
  animation-name:c;
  transform-origin:left;
  transform:rotateY(90deg);
}
div[style*='--d']::after {
  height:var(--d);
  right:0;
  animation-name:b;
  transform-origin:bottom;
  transform:rotateX(90deg);
}

@keyframes a {
  from {
    transform:translateZ(0);
  }
}
@keyframes b {
  from {
    height:0px;
  }
}
@keyframes c {
  from {
    width:0px;
  }
}

<div id="table">
  <div></div><div></div><div></div><div></div><div></div><div style="--d:150px;"></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div style="--d:70px;"></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div style="--d:20px;"></div><div></div><div></div><div></div><div></div><div style="--d:40px;"></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div  style="--d:100px;"></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

【讨论】：

我得到的印象（尽管我可能错了）OP想要从基础层挤出该平面以形成3D“柱”，而不是简单地将平面向上平移。虽然这个问题在这一点上是模棱两可的。
这真是太棒了！是的，大卫，我不清楚，对不起。我打算创建一个专栏。但是 Temani 的解决方案也很不错
@DavidsaysreinstateMonica 怎么一个 3D '列'？你的评论对我来说也是模棱两可的：）我没有在脑海中得到这个形状
@abcson 你能分享你想要的专栏的结果吗？截图可能
@DavidsaysreinstateMonica 好的，现在我们有了专栏；）