如何实现可随屏幕缩放的响应式CSS 3D动画立方体？

我正尝试制作一个可随屏幕尺寸缩放的响应式3D动画立方体，但每当我将像素值修改为百分比值时，立方体就会失效。请问如何让这个立方体兼具功能性与响应式？以下是我的代码：

@-webkit-keyframes spin-anim { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(360deg); } }
@keyframes spin-anim { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
.cube { -webkit-animation: spin-anim 20s infinite linear; animation: spin-anim 20s infinite linear; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.canvas { width:400px; height:400px; -webkit-perspective: 500px; perspective: 500px; margin:auto; }
.face { background-color:blue; width:400px; height:400px; position:absolute; border:1px solid black; }
.front { transform: translateZ(200px); -webkit-transform:translateZ(200px); background-image: url(../assets/logo.jpg); }
.back { transform: rotateX(180deg) translateZ(200px); -webkit-transform:rotateX(180deg) translateZ(200px); background-image: url(http://fillmurray.com/500/500) }
.top { transform: rotateX(90deg) translateZ(200px); -webkit-transform:rotateX(90deg) translateZ(200px); background-image: url(http://fillmurray.com/500/500) }
.bottom { transform: rotateX(-90deg) translateZ(200px); -webkit-transform:rotateX(-90deg) translateZ(200px); background-image: url(http://fillmurray.com/500/500) }
.left { transform: rotateY(-90deg) translateZ(200px); -webkit-transform:rotateY(-90deg) translateZ(200px); background-image: url(http://fillmurray.com/500/500) }
.right { transform: rotateY(90deg) translateZ(200px); -webkit-transform:rotateY(90deg) translateZ(200px); background-image: url(http://fillmurray.com/500/500) }

嘿，我来帮你搞定这个问题！你遇到的核心问题是：直接把像素改成百分比时，translateZ的计算逻辑和立方体的面定位关系被打破了——毕竟3D变换里的百分比是基于元素自身尺寸的，而不是容器，硬改会让各个面错位散开。

下面给你一套完整的响应式解决方案，用CSS变量+视窗单位实现，既保留3D立方体的完整结构，又能随屏幕自动缩放：

完整代码（含HTML结构） #

首先补上你可能缺失的HTML结构：

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

然后是修改后的CSS：

/* 定义全局变量，方便统一控制和响应式调整 */
:root {
  /* 立方体尺寸：用vw单位表示占视窗宽度的80%，可根据需求调整 */
  --cube-size: 80vw;
  /* 立方体半尺寸：动态计算边长的一半，用于3D变换的translateZ */
  --cube-half-size: calc(var(--cube-size) / 2);
}

@-webkit-keyframes spin-anim { 
  from { -webkit-transform: rotateY(0); } 
  to { -webkit-transform: rotateY(360deg); } 
}
@keyframes spin-anim { 
  from { transform: rotateY(0); } 
  to { transform: rotateY(360deg); } 
}

.canvas { 
  width: var(--cube-size); 
  height: var(--cube-size); 
  -webkit-perspective: 1000px; 
  perspective: 1000px; 
  margin: 2rem auto;
  position: relative; /* 作为立方体的定位基准 */
}

.cube { 
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-animation: spin-anim 20s infinite linear; 
  animation: spin-anim 20s infinite linear; 
  transform-style: preserve-3d; 
  -webkit-transform-style: preserve-3d; 
}

.face { 
  background-color: blue; 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  border: 1px solid black;
  /* 让背景图自适应缩放，避免变形 */
  background-size: cover;
  background-position: center;
}

.front { 
  transform: translateZ(var(--cube-half-size)); 
  -webkit-transform:translateZ(var(--cube-half-size)); 
  background-image: url(../assets/logo.jpg); 
}
.back { 
  transform: rotateX(180deg) translateZ(var(--cube-half-size)); 
  -webkit-transform:rotateX(180deg) translateZ(var(--cube-half-size)); 
  background-image: url(http://fillmurray.com/500/500); 
}
.top { 
  transform: rotateX(90deg) translateZ(var(--cube-half-size)); 
  -webkit-transform:rotateX(90deg) translateZ(var(--cube-half-size)); 
  background-image: url(http://fillmurray.com/500/500); 
}
.bottom { 
  transform: rotateX(-90deg) translateZ(var(--cube-half-size)); 
  -webkit-transform:rotateX(-90deg) translateZ(var(--cube-half-size)); 
  background-image: url(http://fillmurray.com/500/500); 
}
.left { 
  transform: rotateY(-90deg) translateZ(var(--cube-half-size)); 
  -webkit-transform:rotateY(-90deg) translateZ(var(--cube-half-size)); 
  background-image: url(http://fillmurray.com/500/500); 
}
.right { 
  transform: rotateY(90deg) translateZ(var(--cube-half-size)); 
  -webkit-transform:rotateY(90deg) translateZ(var(--cube-half-size)); 
  background-image: url(http://fillmurray.com/500/500); 
}

关键知识点解释 #

• CSS变量的妙用：把立方体的尺寸和半尺寸抽成变量，以后想调整大小或者改成基于父容器的百分比（比如把--cube-size改成80%），只需要改一处就行，维护超方便。
• 响应式尺寸控制：用vw单位（视窗宽度的百分比）让立方体随屏幕宽度自动缩放；如果想让它基于某个父容器缩放，就把--cube-size换成百分比，只要父容器有明确的尺寸就行。
• 3D结构的核心逻辑：每个面的translateZ必须是立方体边长的一半，这样所有面才能刚好拼接成完整的立方体。用calc(var(--cube-size)/2)动态计算这个值，完美适配任何尺寸的立方体。
• 背景图自适应：给.face加上background-size: cover和background-position: center，确保背景图在缩放时不会拉伸变形，保持视觉效果。

这样修改后，你的立方体就能完美实现响应式缩放，同时3D旋转动画也能正常工作啦！

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