本文介绍一种基于 css 3d 变换（`transform-style: preserve-3d`）的可靠方案，替代单纯依赖 `border` 和 `border-radius` 的二维旋转，从而彻底解决旋转过程中边框“变细→消失”的视觉失真问题。
传统方式（如使用 border + border-radius + rotateY()）在三维旋转时，浏览器会将二维边框投影到视图平面，导致垂直于视线方向的边框在 90°/270° 位置因透视压缩而视觉上“消失”或严重变细——这并非 bug，而是二维边框本身不具备深度信息所致。
✅ 正确解法是：用真实具有厚度的 3D 面（<div> 元素）模拟“线”，每个面代表线条在不同朝向上的可见部分，并通过 transform: translateZ() 将其沿 Z 轴正向推出，配合 preserve-3d 维持空间关系。
以下为精简可用的核心实现：
.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;
}<div class="cube"> <div class="face front"></div> <div class="face back"></div> <div class="face right"></div> <div class="face left"></div> </div>
? 关键要点说明：
立即学习“前端免费学习笔记（深入）”；
- transform-style: preserve-3d 是核心前提，缺失则所有子元素会被拍平至同一平面，失去 3D 效果；
- translateZ(12.5px) 中的 12.5px 对应原 .box 宽度（25px）的一半，确保前后两面关于中心对称，旋转时无缝衔接；
- 若需更精细控制“弧线感”（如模拟蛋壳边缘），可在 .front/.back 上添加 border-radius: 50px / 100px 等柔性圆角（注意：此时圆角作用于 3D 面本身，不会在旋转中失真）；
- 动画使用 ease-in-out 曲线比线性更自然，避免机械感停顿。
? 进阶提示： 如需真正动态弯曲路径（非刚性旋转），建议结合 SVG <path> + stroke-dasharray + stroke-dashoffset 动画，或使用 CSS Houdini 自定义属性驱动，但本例中纯 CSS 3D 方案已完美满足“稳定可见、无缩放丢失”的核心需求。
