本文介绍如何通过 css 3d 变换（`transform-style: preserve-3d`）替代单纯 `border` + `border-radius` 的二维模拟方案，解决线条在 `rotatey` 动画中因透视压缩导致宽度归零、视觉消失的问题。
在 CSS 动画中，直接使用 border 配合 border-radius 创建弧形边线并施加 rotateY()，看似简洁，实则存在根本性局限：border 是二维渲染对象，不具备深度信息。当元素绕 Y 轴旋转至 90° 或 270° 时，其法线方向正对视线，浏览器会将该平面“压扁”为一条线甚至一个像素，导致边框视觉上完全消失——这不是 bug，而是 CSS 渲染引擎对正交投影下退化几何体的标准处理。
✅ 正确解法是转向真正的三维建模思路：用多个带 background 的矩形面（.face）构成一个细长立方体（.cube），每个面代表线条在不同朝向下的可见部分。关键在于：
- 设置 transform-style: preserve-3d，启用子元素的 3D 空间保留；
- 使用 translateZ() 将各面沿 Z 轴错开，确保它们在 3D 空间中互不重叠且始终有正面朝向视角；
- 主动画仅作用于父容器 .cube，所有子面随其协同旋转，始终保持自身正交尺寸不变。
以下是可直接运行的精简实现（适配原需求的“蛋壳边缘曲线运动”效果）：
.cube {
position: relative;
margin: 30vh 50vw;
transform-style: preserve-3d;
animation: rotateY 4s infinite ease-in-out;
}
@keyframes rotateY {
0%, 100% { transform: rotateY(0deg); }
50% { transform: rotateY(180deg); }
}
.face {
position: absolute;
background: #000; /* 线条颜色 */
width: 25px;
height: 200px;
}
/* 前后面：构成线条主体，沿Z轴前后分布 */
.front {
transform: translateZ(12.5px);
}
.back {
transform: rotateY(180deg) translateZ(12.5px);
}
/* 左右侧面：增强旋转时的立体连贯感（可选） */
.right {
transform: rotateY(90deg) translateZ(12.5px);
}
.left {
transform: rotateY(-90deg) translateZ(12.5px);
}<div class="cube"> <div class="face front"></div> <div class="face back"></div> <!-- 可选：添加左右面提升视觉连续性 --> <div class="face right"></div> <div class="face left"></div> </div>
? 注意事项与优化建议：
立即学习“前端免费学习笔记（深入）”；
- translateZ() 的值（如 12.5px）应等于宽度的一半，保证旋转中心居中；
- 若需更贴近“蛋壳曲率”，可在 .front/.back 上叠加 border-radius: 50px 0 0 50px（仅影响两端，不影响旋转稳定性）；
- 避免在 .face 上使用 border —— 仍会退化；坚持用 background + 精确尺寸控制线条；
- 在移动端需添加 -webkit-transform-style: preserve-3d 兼容旧版 Safari。
这种方法不仅彻底规避了边框消失问题，还为后续扩展（如阴影、光照、多段弧线拼接）提供了坚实基础。本质上，它把“画一条会转的线”升维为“构建一个会转的线状体”，是 CSS 3D 动画实践中的典型范式迁移。
