如何用CSS实现图片在网格地板上的3D立置效果

我想要制作一个带网格的地板，将卡通图片放置在网格上方以呈现3D效果。要求不改变地板或网格的轴，保持现有状态，仅让每个网格元素内的图片和文字与网格、地板呈90度夹角，使其看起来具有3D效果。当前效果类似示例图的红色区域，目标是实现图中黄色区域的效果。

解决方案 #

由于网格容器.chatcontainer应用了rotateX(63deg)的3D旋转，要让内部元素垂直于网格，需要对元素应用反向的旋转变换抵消网格的旋转，同时调整元素的定位和变换原点，确保它们立在网格单元格的上方。

修改后的代码 #

CSS部分

body {
  background-color: #2ee5a2;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  perspective: 10em;
  perspective-origin: 50% calc(50% - 2em);
  overflow: hidden;
}

.chatcontainer {
  display: grid;
  grid-template-columns: repeat(7, 30px);
  grid-template-rows: repeat(7, 30px);
  gap: 60px;
  margin: 10%;
  background-color: #aa69e7;
  border: 1px solid;
  transform: rotateY(0deg) rotateX(63deg);
  /* 开启3D空间继承，确保子元素3D变换生效 */
  transform-style: preserve-3d;
}

.chatcontainer div img {
  width: 50px;
}

.grid-element {
  max-width: 500px;
  /* 反向旋转抵消网格的rotateX(63deg)，让元素垂直 */
  transform: rotateX(-63deg);
  /* 设置变换原点为底部中心，模拟立在网格上的效果 */
  transform-origin: bottom center;
  /* 继承3D空间 */
  transform-style: preserve-3d;
  /* 相对定位，作为内部文字的定位基准 */
  position: relative;
  /* 调整位置，让元素刚好立在网格单元格上方 */
  top: -25px;
}

.usernamelink {
  color: #fafafa;
  text-decoration: none;
  /* 绝对定位到图片下方 */
  position: absolute;
  bottom: -30px;
  left: 50%;
  /* 水平居中+反向旋转，保持文字垂直 */
  transform: translateX(-50%) rotateX(-63deg);
  font-size: 16px;
}

HTML部分

<div class="chatcontainer" id="chatcontainer">
  <div class="static grid-element">
    <img class="animatedGiff" src="https://s.cdpn.io/3/pacman-ghost-hi_1.png">
    <span>
      <b>
        <a class="usernamelink" href="" target="_blank">username</a>
      </b>
    </span>
  </div>
  <div class="static grid-element">
    <img class="animatedGiff" src="https://s.cdpn.io/3/pacman-ghost-hi_1.png">
    <span>
      <b>
        <a class="usernamelink" href="" target="_blank">username</a>
      </b>
    </span>
  </div>
</div>

关键调整说明 #

• 给.chatcontainer添加transform-style: preserve-3d，确保子元素的3D变换能在父容器的3D空间中正确渲染。
• 将.grid-element的旋转从rotateX(327deg)改为rotateX(-63deg)，直接抵消网格容器的rotateX(63deg)，让元素垂直于网格平面。
• 设置transform-origin: bottom center，让元素围绕底部中心旋转，模拟立在网格上的效果。
• 调整.usernamelink的定位和旋转，确保文字也保持垂直，且位于图片下方。

内容的提问来源于stack exchange，提问作者HTQ