使用display: grid生成的单元格是否可实现rotateY翻转效果？

完全可以实现你要的单元格翻转轮播效果，具体方案如下：

核心原理 #

• grid布局生成的单元格是纯逻辑的布局单元，没有对应真实DOM节点，无法直接添加变换效果，你只需要在每个网格单元格位置插入独立的子元素，即可单独控制每个子元素的rotateY翻转效果
• 3D翻转效果依赖CSS变换相关属性，需要额外配置透视、3D空间保留属性保证效果正常

完整代码示例 #

HTML结构 #

<div class="box">
  <!-- 共需要20*20=400个单元格，可直接手写也可以用JS动态生成 -->
  <div class="cell"></div>
  <div class="cell"></div>
  <!-- 省略剩余398个cell元素 -->
</div>

CSS样式 #

.box {
  width: 100%;
  height: 20rem;
  background-color: red;
  display: grid;
  grid-template-rows: repeat(20, 1fr);
  grid-template-columns: repeat(20, 1fr);
  /* 添加透视属性，增强3D翻转的立体效果 */
  perspective: 1000px;
  gap: 1px; /* 可选，添加单元格分隔线效果 */
}
.cell {
  width: 100%;
  height: 100%;
  background: #fff;
  /* 保留3D变换空间，保证子元素的3D效果正常 */
  transform-style: preserve-3d;
  /* 添加过渡实现平滑翻转动画 */
  transition: transform 0.6s ease;
  /* 可选，翻转时隐藏元素背面内容 */
  backface-visibility: hidden;
}
/* 翻转状态类，触发时执行Y轴翻转 */
.cell.flip {
  transform: rotateY(180deg);
}

翻转触发逻辑（JS示例） #

const cells = document.querySelectorAll('.cell')
// 示例：随机选中10个单元格执行翻转，可绑定到轮播切换事件
function randomFlip() {
  cells.forEach(cell => cell.classList.remove('flip'))
  Array.from({length:10}, () => Math.floor(Math.random()*400))
    .forEach(idx => cells[idx]?.classList.add('flip'))
}

轮播组件适配要点 #

• 正反面内容配置：给每个.cell添加正面、背面两个子元素，分别承载上一张轮播图和下一张轮播图对应位置的切片内容，背面元素默认设置transform: rotateY(180deg)即可
• 切片适配：如果是整图切换效果，给每个cell设置背景图时，用background-position匹配对应单元格在整张图里的位置即可
• 转场效果控制：可以按行、列、对角线、随机等规则控制不同单元格的翻转触发时机，实现不同的转场动画
• 性能优化：如果觉得400个DOM节点性能开销大，可以根据效果需求调整网格密度，比如降到10*10的网格，视觉效果差别不大的前提下性能提升一倍

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