本文讲解如何通过 css 3d 变换（`transform-style: preserve-3d`）替代单纯 `border` + `border-radius` 的二维方案，解决旋转过程中边框因透视压缩而变细甚至消失的问题。
在 CSS 动画中，直接对一个仅靠 border 和 border-radius 构建的“弧形线”应用 rotateY()，会导致浏览器在 3D 空间中对该元素进行正交投影——当旋转角度接近 90° 或 270° 时，元素在 Z 轴方向的“厚度”被压扁至视觉不可见，表现为边框宽度急剧收缩甚至完全消失。这不是 bug，而是 border 本身不具备真实三维体积的必然结果。
根本解法是：放弃用 border 模拟线条，转而用具有明确尺寸与深度的 3D 面（ 我们创建一个中心对齐的 .cube 容器，并启用 3D 渲染上下文；再为每个关键视角（前、后、左、右）添加独立的 .face 元素，每个面都沿 Z 轴平移一定距离，确保其在旋转时始终面向视图或按需呈现： 对应 HTML 结构只需四个面（前、后、左、右），无需顶部/底部（除非需要闭合效果）： 立即学习“前端免费学习笔记（深入）”； 该方法不仅彻底规避了边框消失问题，还具备良好的性能（GPU 加速）、可扩展性（支持多色、渐变、阴影）及语义清晰性——每一根“线”都是一个真实、可独立控制的 DOM 元素。✅ 推荐方案：使用 3D 立方体面模拟“曲边线”
.cube {
position: relative;
margin: 30vh 50vw; /* 居中显示 */
transform-style: preserve-3d; /* 关键：保留子元素的 3D 位置 */
animation: rotateLoop 4s infinite ease-in-out;
}
@keyframes rotateLoop {
0%, 100% { transform: rotateY(0deg); }
50% { transform: rotateY(180deg); }
}
.face {
position: absolute;
background-color: #000;
/* 所有面统一尺寸：模拟一条竖直黑线 */
width: 3px; /* 线宽（建议 2–4px，避免抗锯齿模糊） */
height: 120px; /* 线高 */
}
.front {
transform: translateZ(1.5px);
}
.back {
transform: rotateY(180deg) translateZ(1.5px);
}
.left {
transform: rotateY(-90deg) translateZ(1.5px);
}
.right {
transform: rotateY(90deg) translateZ(1.5px);
}⚠️ 注意事项
