如何使用Flutter创建支持自定义各面图片、可旋转的3D立方体？

核心实现思路 #

基于CSS 3D变换+JS交互实现，不需要引入额外第三方库，性能表现更好。

具体实现步骤 #

• 第一步：搭建DOM结构
  一个父容器cube-container用来承载立方体，内部放6个子元素分别对应立方体的6个面：前、后、左、右、上、下
  示例DOM结构：

  <div class="cube-container">
    <div class="cube-face front"></div>
    <div class="cube-face back"></div>
    <div class="cube-face left"></div>
    <div class="cube-face right"></div>
    <div class="cube-face top"></div>
    <div class="cube-face bottom"></div>
  </div>
  

• 第二步：编写3D基础样式
  给父容器开启3D空间，设置立方体的边长（示例取200px，可自行调整），给每个面设置绝对定位，宽高等于边长，再通过transform属性把每个面平移旋转到对应的空间位置：
  示例CSS代码：

  .cube-container {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    /* 初始旋转角度方便查看效果 */
    transform: rotateX(20deg) rotateY(30deg);
    transition: transform 0.2s ease;
  }
  .cube-face {
    position: absolute;
    width: 200px;
    height: 200px;
    /* 可以加边框方便看边界，不需要可以删掉 */
    border: 1px solid #ccc;
    background-size: cover;
    background-position: center;
  }
  /* 每个面的空间定位 */
  .front { transform: translateZ(100px); }
  .back { transform: rotateY(180deg) translateZ(100px); }
  .left { transform: rotateY(-90deg) translateZ(100px); }
  .right { transform: rotateY(90deg) translateZ(100px); }
  .top { transform: rotateX(90deg) translateZ(100px); }
  .bottom { transform: rotateX(-90deg) translateZ(100px); }
  

• 第三步：给每个面设置自定义图片
  直接给对应面的background-image设置你要的图片地址即可，比如给正面设置自定义图：

  .front {
    background-image: url('你的正面图片地址');
  }
  

  也可以用JS动态修改任意面的背景图，比如修改背面图片：

  document.querySelector('.back').style.backgroundImage = 'url(你的新背面图片地址)'
  

• 第四步：实现拖拽旋转交互
  监听鼠标/触摸的拖拽事件，计算拖拽的偏移量，实时修改cube-container的rotateX和rotateY值即可，示例JS代码：

  let isDragging = false;
  let startX, startY, currentX = 20, currentY = 30;
  const cube = document.querySelector('.cube-container');
  
  cube.addEventListener('mousedown', (e) => {
    isDragging = true;
    startX = e.clientX;
    startY = e.clientY;
  });
  
  document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    const deltaX = e.clientX - startX;
    const deltaY = e.clientY - startY;
    currentY += deltaX * 0.5;
    currentX -= deltaY * 0.5;
    cube.style.transform = `rotateX(${currentX}deg) rotateY(${currentY}deg)`;
    startX = e.clientX;
    startY = e.clientY;
  });
  
  document.addEventListener('mouseup', () => {
    isDragging = false;
  });
  // 移动端触摸事件逻辑和鼠标事件一致，替换成touchstart/touchmove/touchend即可
  

效果优化建议 #

• 可以给每个面加半透明效果，或者加内阴影提升立体感
• 如果需要适配不同尺寸，把固定的200px改成CSS变量即可，修改一个地方全生效
• 拖拽的时候可以加上缓动效果，交互更顺滑

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