本文介绍一种基于 css 3d 变换（`transform-style: preserve-3d`）的可靠方案，替代单纯依赖 `border` 和 `border-radius` 的二维旋转，从而彻底解决旋转过程中边框“变细→消失”的视觉失真问题。
传统方式（如使用 border + border-radius + rotateY()）在三维旋转时，浏览器会将二维边框投影到视图平面，导致垂直于视线方向的边框在 90°/270° 位置因透视压缩而视觉上“消失”或严重变细——这并非 bug，而是二维边框本身不具备深度信息所致。
✅ 正确解法是：用真实具有厚度的 3D 面（ 以下为精简可用的核心实现： ? 关键要点说明： 立即学习“前端免费学习笔记（深入）”； ? 进阶提示： 如需真正动态弯曲路径（非刚性旋转），建议结合 SVG .cube {
position: relative;
margin: 30vh 50vw; /* 居中显示 */
transform-style: preserve-3d; /* 关键：启用子元素 3D 空间定位 */
animation: rotateY 4s infinite ease-in-out;
}
@keyframes rotateY {
0%, 100% { transform: rotateY(0deg); }
50% { transform: rotateY(180deg); }
}
.face {
position: absolute;
background-color: #000; /* 统一设为黑色，即“线”的颜色 */
will-change: transform; /* 提升动画性能 */
}
/* 前后面：构成主视觉“竖直线段”，Z 距离为 half-width */
.front {
transform: translateZ(12.5px);
width: 25px;
height: 200px;
}
.back {
transform: rotateY(180deg) translateZ(12.5px);
width: 25px;
height: 200px;
}
/* 左右侧面：增强旋转过渡的立体感（可选，但推荐保留以避免视觉断裂） */
.right {
transform: rotateY(90deg) translateZ(12.5px);
width: 25px;
height: 200px;
}
.left {
transform: rotateY(-90deg) translateZ(12.5px);
width: 25px;
height: 200px;
}
