本文讲解如何通过 css 3d 变换（`transform-style: preserve-3d`）替代单纯 `border` + `border-radius` 的二维方案，解决旋转过程中边框因透视压缩而变细甚至消失的问题。
在 CSS 动画中，直接对一个仅靠 border 和 border-radius 构建的“弧形线”应用 rotateY()，会导致浏览器在 3D 空间中对该元素进行正交投影——当旋转角度接近 90° 或 270° 时，元素在 Z 轴方向的“厚度”被压扁至视觉不可见，表现为边框宽度急剧收缩甚至完全消失。这不是 bug，而是 border 本身不具备真实三维体积的必然结果。
根本解法是：放弃用 border 模拟线条，转而用具有明确尺寸与深度的 3D 面（<div>）来构建可稳定渲染的几何轮廓。下面是一个轻量、可控且兼容性良好的实现方案：
✅ 推荐方案：使用 3D 立方体面模拟“曲边线”
我们创建一个中心对齐的 .cube 容器，并启用 3D 渲染上下文；再为每个关键视角（前、后、左、右）添加独立的 .face 元素，每个面都沿 Z 轴平移一定距离，确保其在旋转时始终面向视图或按需呈现：
.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);
}对应 HTML 结构只需四个面（前、后、左、右），无需顶部/底部（除非需要闭合效果）：
立即学习“前端免费学习笔记（深入）”；
<div class="cube"> <div class="face front"></div> <div class="face back"></div> <div class="face left"></div> <div class="face right"></div> </div>
⚠️ 注意事项
- 不要滥用 border-radius 配合 rotateY：它本质是二维裁剪，在 3D 旋转下无深度信息，必然失真；
- transform-style: preserve-3d 必须设在动画父容器上，否则子元素会扁平化到同一平面；
- translateZ() 值需略大于 width/2（如 width: 3px → translateZ(1.5px)），保证各面不重叠又保持视觉连贯；
- 若需更精细的“蛋壳边缘”曲线感，可在 .face 上叠加 clip-path: ellipse(...) 或使用 SVG <path> 替代，但 CSS 3D 方案已满足绝大多数流畅旋转需求。
该方法不仅彻底规避了边框消失问题，还具备良好的性能（GPU 加速）、可扩展性（支持多色、渐变、阴影）及语义清晰性——每一根“线”都是一个真实、可独立控制的 DOM 元素。
