如何制作具有挤压效果的 3D 元素？

Question

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

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

是否有任何属性修改 div "z-heigth"，允许我给每个内部单元格一个不同的 "depth"，创建一个列？

单元格和Table当前代码：

#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>

Answer 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>

也像下面一样通过添加伪元素来创建'walls'

#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>

如何制作具有挤压效果的 3D 元素？

How to make a 3D element with an extrude effect?

html

css

css-transforms